/* ---------- Level Placement Quiz ---------- */

.quiz-modal{
  position:fixed; inset:0; z-index:300;
  display:none; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(10,30,51,0.2);
  backdrop-filter:blur(8px);
}
.quiz-modal.active{display:flex;}

.quiz-box{
  position:relative;
  width:100%; max-width:620px;
  max-height:88vh; overflow-y:auto;
  background:rgba(255, 249, 249, 0.55);
  -webkit-backdrop-filter:blur(28px);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:24px;
  box-shadow:0 30px 60px -20px rgba(10,30,51,0.45);
  padding:32px 28px 28px;
  animation:quizPop .22s ease;
}
.quiz-box::-webkit-scrollbar{display:none;}
.quiz-box{scrollbar-width:none; -ms-overflow-style:none;}
@keyframes quizPop{
  from{opacity:0; transform:translateY(10px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.quiz-close{
  position:absolute; top:18px; left:18px;
  width:34px; height:34px; border-radius:50%;
  background:var(--surface-alt); color:var(--ink-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; line-height:1; transition:.2s;
}
.quiz-close:hover{background:var(--lavender); color:var(--ink);}

.quiz-head{margin-bottom:22px; padding-inline-end:36px;}
.quiz-eyebrow{color:var(--purple-1); font-weight:700; font-size:0.9rem; display:block; margin-bottom:6px;}
.quiz-title{font-size:1.25rem; font-weight:800;}

.quiz-progress-track{
  height:8px; border-radius:100px; background:var(--surface-alt);
  overflow:hidden; margin-top:16px;
}
.quiz-progress-fill{
  height:100%; border-radius:100px;
  background:var(--gradient-brand);
  width:10%; transition:width .3s ease;
}
.quiz-progress-label{
  display:flex; justify-content:space-between;
  color:var(--ink-muted); font-size:0.82rem; margin-top:8px; font-weight:600;
}

/* Question */
.quiz-question-num{color:var(--purple-1); font-weight:800; font-size:0.85rem; margin-bottom:6px; display:block;}
.quiz-question-text{font-size:1.08rem; font-weight:700; margin-bottom:18px; line-height:1.6;}

.quiz-options{display:flex; flex-direction:column; gap:10px;}
.quiz-option{
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--line); border-radius:14px;
  padding:14px 16px; cursor:pointer; transition:.18s;
  background:var(--bg);
}
.quiz-option:hover{border-color:var(--purple-2);}
.quiz-option.selected{border-color:var(--purple-1); background:var(--surface-alt); box-shadow:var(--shadow-soft);}

.quiz-option-check{
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--lavender); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  transition:.18s;
}
.quiz-option.selected .quiz-option-check{
  background:var(--purple-1); border-color:var(--purple-1);
}
.quiz-option-check svg{width:12px; height:12px; opacity:0; transform:scale(.6); transition:.15s; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.quiz-option.selected .quiz-option-check svg{opacity:1; transform:scale(1);}

.quiz-option-text{font-size:0.96rem; font-weight:500; line-height:1.55;}

/* Nav buttons */
.quiz-nav{display:flex; gap:12px; margin-top:26px;}
.quiz-btn{
  flex:1; padding:13px 18px; border-radius:100px;
  font-weight:700; font-size:0.95rem; text-align:center; transition:.2s;
}
.quiz-btn-prev{
  width:100%;
  background:#ffffff;
  color:#000000;
  padding:14px;
  border-radius:12px;
  font-weight:700;
  font-size:1rem;
  margin-top:8px;
  box-shadow:var(--shadow-soft);
  transition:transform .2s;}
.quiz-btn-prev:hover{background:var(--lavender); transform:translateY(-2px); transition: 0.2s;}
.quiz-btn-prev:disabled{opacity:0.45; cursor:not-allowed;transform: none; background: none;}
.quiz-btn-next{
  width:100%;
  background:var(--purple-2);
  color:#fff;
  padding:14px;
  border-radius:12px;
  font-weight:700;
  font-size:1rem;
  margin-top:8px;
  box-shadow:var(--shadow-soft);
  transition:transform .2s;}
.quiz-btn-next:hover{background:var(--lavender); transform:translateY(-2px); transition: 0.2s;}
.quiz-btn-next:disabled{opacity:0.45; cursor:not-allowed; transform:none;}
/* Result */
.quiz-result{text-align:center; display:none; padding:6px 4px 4px;}
.quiz-result.active{display:block;}
.quiz-result-icon{
  width:76px; height:76px; margin:0 auto 18px; border-radius:50%;
  background:var(--gradient-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:800; box-shadow:var(--shadow-soft);
}
.quiz-result-eyebrow{color:var(--ink-muted); font-weight:600; font-size:0.92rem; margin-bottom:6px; display:block;}
.quiz-result-level{font-size:1.5rem; font-weight:800; margin-bottom:10px; color:var(--purple-1);}
.quiz-result-desc{color:var(--ink-muted); max-width:44ch; margin:0 auto 24px; line-height:1.8;}
.quiz-result-actions{display:flex; flex-direction:column; gap:10px;}
.quiz-result-actions .quiz-btn{flex:none;}

.quiz-body{display:none;}
.quiz-body.active{display:block;}

@media (max-width:560px){
  .quiz-box{padding:26px 18px 22px; border-radius:18px;}
  .quiz-title{font-size:1.1rem;}
}