/* KvestZania - подбор квеста */

.quiz__intro{padding-block:14px 4px}
.quiz__intro h1{margin-bottom:12px;max-width:16ch}
.quiz__intro p{color:var(--txt-dim);font-size:17px;line-height:1.55;margin:0;max-width:62ch}

.quiz{padding:clamp(17px,2.4vw,26px);max-width:860px;margin-inline:auto}
.quiz:hover{transform:none}

/* полоса прогресса */
.quiz__bar{height:4px;border-radius:99px;background:var(--bg-3);overflow:hidden;margin-bottom:20px}
.quiz__bar-fill{display:block;height:100%;width:25%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--green-lt));transition:width .4s cubic-bezier(.2,.7,.3,1)}

.quiz__step{display:none;border:0;padding:0;margin:0;min-width:0}
.quiz__step.is-active{display:block;animation:step-in .35s ease}
@keyframes step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.quiz__q{font-family:var(--font-head);font-size:clamp(20px,2.4vw,25px);font-weight:800;letter-spacing:-.02em;margin-bottom:16px;padding:0;display:block}
.quiz__q span{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:8px}

.quiz__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz__opts--age{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}

.opt{display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__in{
  display:flex;align-items:center;gap:13px;height:100%;
  padding:14px 16px;border-radius:14px;
  background:var(--bg-2);border:1.5px solid var(--line);
  transition:border-color .16s,background .16s,transform .16s;
}
.opt:hover .opt__in{border-color:rgba(20,184,119,.45);transform:translateY(-1px)}
.opt input:checked + .opt__in{border-color:var(--green);background:rgba(20,184,119,.08)}
.opt input:focus-visible + .opt__in{outline:2px solid var(--green);outline-offset:2px}
.opt__in svg{flex-shrink:0;color:var(--green)}
.opt__in b{display:block;font-weight:600;font-size:15.5px;margin-bottom:2px}
.opt__in i{display:block;font-style:normal;font-size:13px;color:var(--txt-dim);line-height:1.4}

.opt--sm .opt__in{justify-content:center;padding:14px 10px;font-weight:700;font-size:18px}

.quiz__nav{display:flex;gap:12px;margin-top:20px;justify-content:space-between}
.quiz__nav .btn{min-width:150px}
.quiz__nav #quizNext{margin-left:auto}

/* результат */
.quiz__res{max-width:1100px;margin-inline:auto}
.quiz__res .sect__hd{text-align:center;margin-inline:auto}
.quiz__res .qgrid{columns:3;column-gap:20px}

.quiz__cta{
  display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;
  margin-top:22px;padding:clamp(18px,2.4vw,26px);
  background:var(--dark);color:#fff;border:0;
}
.quiz__cta:hover{transform:none}
.quiz__cta h3{color:#fff;font-size:23px;margin-bottom:8px}
.quiz__cta p{color:rgba(255,255,255,.75);margin:0;font-size:15.5px}
.quiz__cta .field input{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#fff}
.quiz__cta .field input::placeholder{color:rgba(255,255,255,.55)}
.quiz__cta .field input:focus{background:rgba(255,255,255,.16);border-color:#fff}
.quiz__cta .consent{color:rgba(255,255,255,.7)}
.quiz__cta .consent a{color:#fff}
.quiz__done{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:rgba(62,207,142,.18);color:#8ff0c0;font-size:14px}

@media (max-width:860px){
  .quiz__opts{grid-template-columns:1fr}
  .quiz__cta{grid-template-columns:1fr;gap:18px}
  .quiz__res .qgrid{columns:2}
}
@media (max-width:560px){
  .quiz__nav{flex-direction:column-reverse}
  .quiz__nav .btn{width:100%}
  .quiz__res .qgrid{columns:1}
}