/* assets/wheels/quiz.css */
/* Matchar Wheels site.css-känslan (blå bas), utan att krocka med övriga sidor. */

.quiz-wrap{max-width:1100px;margin:0 auto;padding:20px}
.quiz-grid{display:grid;grid-template-columns: 340px 1fr;gap:18px}
@media (max-width: 980px){.quiz-grid{grid-template-columns:1fr}}

.quiz-card{background:var(--card,#fff);border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.quiz-pad{padding:16px}

.quiz-h1{font-size:1.6rem;margin:0 0 8px}
.quiz-muted{color:var(--muted,#6b7280)}
.quiz-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

.quiz-progress{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.quiz-pill{min-width:38px;height:32px;border-radius:999px;border:1px solid rgba(0,0,0,.10);display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff}
.quiz-pill[data-state="current"]{outline:2px solid rgba(42,91,215,.35)}
.quiz-pill[data-state="answered"]{background:rgba(42,91,215,.08);border-color:rgba(42,91,215,.25)}
.quiz-pill[data-flag="1"]{box-shadow:inset 0 0 0 2px rgba(245,158,11,.55)}
.quiz-pill small{font-weight:700}

.quiz-q{font-size:1.25rem;margin:0 0 10px}
.quiz-answers{display:grid;gap:10px;margin-top:10px}
.quiz-ans{display:flex;gap:10px;align-items:flex-start;padding:12px 12px;border:1px solid rgba(0,0,0,.10);border-radius:14px;background:#fff;cursor:pointer}
.quiz-ans:hover{border-color:rgba(42,91,215,.35)}
.quiz-ans input{margin-top:4px}
.quiz-ans[data-correct="1"]{border-color:rgba(16,185,129,.55);background:rgba(16,185,129,.08)}
.quiz-ans[data-wrong="1"]{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.08)}

.quiz-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.quiz-actions .btn{white-space:nowrap}
.quiz-flag{background:rgba(245,158,11,.10)!important;border-color:rgba(245,158,11,.35)!important}

.quiz-sign{display:flex;align-items:center;justify-content:center;padding:10px;margin:10px 0;border-radius:14px;background:rgba(42,91,215,.06);border:1px solid rgba(42,91,215,.12)}
.quiz-sign svg{max-width:100%;height:auto}

.quiz-explain{margin-top:12px;padding:12px;border-radius:14px;background:rgba(0,0,0,.04)}
.quiz-explain strong{display:block;margin-bottom:6px}

.quiz-topline{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.quiz-timer{font-weight:800;padding:6px 10px;border-radius:999px;background:rgba(42,91,215,.10);border:1px solid rgba(42,91,215,.18)}
.quiz-timer[data-urgent="1"]{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.25)}