/* Подбор квартиры четырьмя вопросами.
   Палитра берётся из токенов раздела, но с запасными значениями: на листинге
   свой набор переменных, общих токенов там нет. Так же сделано в lead.css. */

.qz { position: fixed; inset: 0; z-index: 910; display: grid; place-items: center; padding: 20px; }
.qz[hidden] { display: none; }
.qz__veil { position: absolute; inset: 0; background: rgba(6, 8, 12, .74); backdrop-filter: blur(2px); }

.qz__win {
  position: relative; width: min(480px, 100%); max-height: calc(100dvh - 40px); overflow: auto;
  padding: 24px 22px 22px; border-radius: 14px;
  background: var(--bt-surface-2, #1a1f2e); color: var(--bt-text, #fff);
  border: 1px solid var(--bt-line-2, rgba(255, 255, 255, .12));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.qz__x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; cursor: pointer;
  border: 0; border-radius: 50%; background: none; color: inherit; opacity: .6; font-size: 15px;
}
.qz__x:hover { opacity: 1; }

.qz__head { font-size: 12px; opacity: .6; margin-bottom: 9px; }
.qz__bar { display: flex; gap: 5px; margin-bottom: 22px; }
.qz__bar i {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--bt-line-2, rgba(255, 255, 255, .14));
}
.qz__bar i.is-on { background: var(--btn-primary-bg, #E8850C); }

.qz__q { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.qz__hint { margin: 0 0 20px; font-size: 13.5px; line-height: 1.5; opacity: .65; }
.qz__note {
  margin: -8px 0 16px; padding: 9px 12px; border-radius: 9px; font-size: 13px; line-height: 1.45;
  background: rgba(232, 133, 12, .12); border: 1px solid rgba(232, 133, 12, .3);
}

.qz__opts { display: grid; gap: 9px; }
.qz__opt {
  width: 100%; text-align: left; padding: 15px 16px; cursor: pointer;
  border-radius: 13px; font: 500 15px/1.35 inherit; color: inherit;
  background: var(--bt-surface-3, rgba(255, 255, 255, .045));
  border: 1px solid var(--bt-line-2, rgba(255, 255, 255, .16));
  transition: border-color .15s, background-color .15s;
}
.qz__opt:hover { border-color: var(--btn-primary-bg, #E8850C); }
.qz__opt.is-on {
  border-color: var(--btn-primary-bg, #E8850C);
  background: rgba(232, 133, 12, .12); font-weight: 700;
}

.qz__back, .qz__skip {
  margin-top: 16px; padding: 0; cursor: pointer;
  background: none; border: 0; color: inherit; opacity: .6;
  font: 400 13px/1 inherit; text-decoration: underline;
}
.qz__back:hover, .qz__skip:hover { opacity: 1; }
.qz__skip { display: block; }

/* ── результат ───────────────────────────────────────────────────────── */
.qz__cards { display: grid; gap: 9px; margin-bottom: 20px; }
.qz__card {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: 13px; text-decoration: none; color: inherit;
  background: var(--bt-surface-3, rgba(255, 255, 255, .045));
  border: 1px solid var(--bt-line-2, rgba(255, 255, 255, .16));
  transition: border-color .15s;
}
.qz__card:hover { border-color: var(--btn-primary-bg, #E8850C); }
.qz__card__l { flex: 1; min-width: 0; }
.qz__card__n { font-size: 15px; font-weight: 700; line-height: 1.25; }
.qz__card__d { margin-top: 2px; font-size: 12.5px; line-height: 1.35; opacity: .65; }
.qz__card__p {
  font-size: 15px; font-weight: 700; white-space: nowrap;
  color: var(--gold, var(--bt-primary, #ED8168));
}

.qz__ask { font-size: 16px; font-weight: 700; line-height: 1.3; }
.qz__askd { margin-top: 3px; font-size: 13px; line-height: 1.45; opacity: .65; }
.qz__l { display: block; margin: 13px 0 5px; font-size: 12px; opacity: .75; }
.qz__i {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 14px; color: inherit;
  background: var(--bt-surface-3, rgba(255, 255, 255, .06));
  border: 1px solid var(--bt-line-2, rgba(255, 255, 255, .14)); border-radius: 9px;
}
.qz__i:focus { outline: 2px solid var(--btn-primary-bg, #E8850C); outline-offset: 1px; }
.qz__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.qz__go {
  width: 100%; margin-top: 16px; padding: 14px 16px; cursor: pointer;
  border: 0; border-radius: var(--btn-radius, 999px); font: 700 14.5px/1 inherit;
  background: var(--btn-primary-bg, #E8850C); color: var(--btn-primary-text, #14161A);
}
.qz__go:hover { background: var(--btn-primary-hover, #D47A09); }
.qz__go[disabled] { opacity: .6; cursor: default; }

.qz__legal { margin: 11px 0 0; font-size: 11.5px; line-height: 1.45; text-align: center; opacity: .62; }
.qz__legal a { color: inherit; text-decoration: underline; }
.qz__msg { margin: 12px 0 0; font-size: 13px; }
.qz__msg--err { color: #F87171; }

.qz__opt:focus-visible, .qz__go:focus-visible, .qz__card:focus-visible,
.qz__back:focus-visible, .qz__skip:focus-visible, .qz__x:focus-visible {
  outline: 2px solid var(--btn-primary-bg, #E8850C); outline-offset: 2px;
}

/* На телефоне окно занимает низ экрана целиком: так до вариантов дотягивается
   большой палец, а не приходится тянуться к середине. Как в форме заявки. */
@media (max-width: 520px) {
  .qz { padding: 0; place-items: end stretch; }
  .qz__win { width: 100%; max-height: 94dvh; border-radius: 14px 14px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .qz__opt, .qz__card { transition: none; }
}