/* Квиз v2: экран-итог, канал ответа, компактная картинка на последних шагах. [quiz-v2 2026-10-10]
   Один файл на главную (redesign/v3/index.html) и разделы (quiz_block.php). Подключается ПОСЛЕ
   quiz.css / стилей главной, поэтому селекторы .quiz-card … перекрывают .mp-quiz … той же силы. */

/* последние два экрана: картинка сборки меньше — чтобы кнопка отправки помещалась в окно на ноутбуке */
.quiz-card.is-final .quiz-art{ padding-top:.7rem; padding-bottom:.7rem; gap:.3rem; }
.quiz-card.is-final .quiz-art__img{ height:84px; }
.quiz-card.is-final .quiz-art__cap{ font-size:.9rem; }
@media (min-width:760px){
  .quiz-card.is-final .quiz-art__img{ height:96px; }
}

/* ---- экран-итог ---- */
.quiz-card .quiz-sum .quiz-q{ margin-bottom:.6rem; }
.quiz-card .quiz-sum-lead{ color:var(--ink-soft,#C9C4BE); margin:0 0 1rem; font-size:.98rem; line-height:1.45; }
.quiz-card .quiz-sum[aria-busy="true"] .quiz-q{ opacity:.7; }
.quiz-card .quiz-sum-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.quiz-card .quiz-sum-item a{
  display:grid; grid-template-columns:72px 1fr; grid-template-rows:auto auto; column-gap:.85rem; row-gap:.2rem;
  align-items:center; padding:.55rem; border-radius:var(--radius-s,14px); text-decoration:none;
  background:var(--cream,#121313); box-shadow:inset 0 0 0 1.5px var(--line,rgba(255,255,255,.14));
  color:var(--ink,#E9E6E2); transition:box-shadow .15s ease;
}
.quiz-card .quiz-sum-item a:hover{ box-shadow:inset 0 0 0 2px var(--terra,#106855); }
.quiz-card .quiz-sum-item a:focus-visible{ outline:3px solid var(--terra,#106855); outline-offset:2px; }
.quiz-card .quiz-sum-item img, .quiz-card .quiz-sum-noimg{
  grid-row:1 / span 2; width:72px; height:72px; object-fit:contain; border-radius:10px; background:#fff;
}
.quiz-card .quiz-sum-name{ font-size:.92rem; line-height:1.3; font-weight:500; align-self:end;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.quiz-card .quiz-sum-price{ font-weight:800; font-size:1rem; align-self:start; color:var(--terra-text,#8FD3BE); white-space:nowrap; }
.quiz-card .quiz-sum-note{ margin:.9rem 0 0; font-size:.85rem; line-height:1.4; color:var(--ink-soft,#C9C4BE); }
.quiz-card .quiz-sum-note[hidden]{ display:none; }
@media (min-width:640px){
  .quiz-card .quiz-sum-list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .quiz-card .quiz-sum-item a{ grid-template-columns:1fr; grid-template-rows:auto; height:100%; align-content:start; padding:.6rem .6rem .8rem; }
  .quiz-card .quiz-sum-item img, .quiz-card .quiz-sum-noimg{ grid-row:auto; width:100%; height:auto; aspect-ratio:4/3; }
  .quiz-card .quiz-sum-name{ align-self:start; margin-top:.35rem; }
}

/* ---- контакты ---- */
.quiz-card .quiz-final .quiz-q{ margin-bottom:.5rem; }
.quiz-card .quiz-final p.quiz-promise{
  margin:0 0 1.1rem; font-size:1rem; line-height:1.45; font-weight:600; color:var(--ink,#E9E6E2);
}
.quiz-card .field-label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.45rem; }
.quiz-card .chan-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.quiz-card .chan-row .quiz-opt span{ justify-content:center; padding:.8rem .4rem; font-size:.95rem; }
.quiz-card .chan-more{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; font-size:.88rem; }
.quiz-card .chan-more__t{ color:var(--ink-soft,#C9C4BE); }
.quiz-card .quiz-opt--sm span{ padding:.4rem .9rem; font-size:.88rem; min-height:36px; justify-content:center; }
.quiz-card .field[hidden]{ display:none; }
.quiz-card .field input[aria-invalid="true"]{ border-color:#E0704A; }
.quiz-card .quiz-consent input[aria-invalid="true"]{ outline:2px solid #E0704A; outline-offset:2px; }
/* подсказка об ошибке: светлее прежней #B0421C — на тёмной карточке та читалась плохо */
.quiz-card .quiz-hint{ color:#FF9B73; font-weight:600; }
@media (max-width:420px){
  .quiz-card .chan-row .quiz-opt span{ font-size:.9rem; padding:.75rem .25rem; }
}

/* [quiz-v2 2026-10-10] низкое окно (ноутбук 1366×768, 1440×900, телефон): на итоге и контактах картинку
   сборки убираем — иначе кнопка отправки уходит под край экрана и под плашку cookie */
@media (max-height:920px){
  .quiz-card.is-final .quiz-art{ display:none; }
}
/* телефон и ник рядом на широком экране — минус одна строка высоты */
@media (min-width:640px){
  .quiz-card .quiz-final:not([hidden]){ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:.8rem; }
  .quiz-card .quiz-final > *{ grid-column:1 / -1; }
  .quiz-card .quiz-final:has(#nick-field:not([hidden])) > #phone-field,
  .quiz-card .quiz-final:has(#nick-field:not([hidden])) > #nick-field{ grid-column:auto; }
}

/* без картинки — отступ от полосы прогресса до вопроса */
@media (max-height:920px){
  .quiz-card.is-final .quiz-art ~ div.quiz-step:not(.quiz-thanks){ padding-top:1.2rem; }
}
/* на страницах Битрикса тема рисует у li свои маркеры — в списке моделей они не нужны */
.quiz-card .quiz-sum-list > li{ list-style:none; margin:0; padding:0; }
.quiz-card .quiz-sum-list > li::before, .quiz-card .quiz-sum-list > li::marker{ content:none; display:none; }
.quiz-card .chan-more{ align-items:center; }
.quiz-card .chan-more__t{ line-height:1; }

/* ---- [quiz-nophone 2026-10-10] «Не хотите оставлять номер? Напишите нам сами» — сверху шага контактов ---- */
.quiz-card .quiz-chat{
  margin:0 0 .9rem; padding:.85rem .9rem .9rem; border-radius:var(--radius-s,14px);
  background:var(--cream,#121313); box-shadow:inset 0 0 0 1.5px var(--line,rgba(255,255,255,.14));
}
.quiz-card .quiz-chat__t{ margin:0 0 .7rem; font-size:.95rem; line-height:1.45; color:var(--ink-soft,#C9C4BE); }
.quiz-card .quiz-chat__t b{ color:var(--ink,#E9E6E2); font-weight:700; }
.quiz-card .quiz-chat__btns{ display:grid; grid-template-columns:1fr; gap:.5rem; }
.quiz-card .quiz-chat__btn{
  display:flex; align-items:center; justify-content:center; gap:.55rem; min-height:46px; padding:.6rem 1rem;
  font:inherit; font-size:.95rem; font-weight:700; line-height:1.2; cursor:pointer; border:0; border-radius:999px;
  color:var(--ink,#E9E6E2); background:transparent; box-shadow:inset 0 0 0 1.5px var(--line,rgba(255,255,255,.22));
  transition:box-shadow .15s ease, background-color .15s ease;
}
.quiz-card .quiz-chat__btn svg{ width:1.15rem; height:1.15rem; flex:none; fill:currentColor; stroke:none; }
.quiz-card .quiz-chat__btn--tg svg{ color:#2AABEE; }
.quiz-card .quiz-chat__btn--max svg{ color:#8B7BFF; }
.quiz-card .quiz-chat__btn:hover{ box-shadow:inset 0 0 0 2px var(--terra-text,#8FD3BE); }
.quiz-card .quiz-chat__btn:focus-visible, .quiz-card .quiz-chat__copy:focus-visible, .quiz-card .quiz-chat__open:focus-visible{
  outline:3px solid var(--terra-text,#8FD3BE); outline-offset:2px; }
.quiz-card .quiz-chat__btn[aria-busy="true"]{ opacity:.75; cursor:progress; }
.quiz-card .quiz-chat__btn[aria-expanded="true"]{ box-shadow:inset 0 0 0 2px var(--terra-text,#8FD3BE); }
@media (min-width:520px){
  .quiz-card .quiz-chat__btns{ grid-template-columns:1fr 1fr; }
}
/* «Ваш подбор» для Max */
.quiz-card .quiz-chat__max{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line,rgba(255,255,255,.14)); }
.quiz-card .quiz-chat__max[hidden]{ display:none; }
.quiz-card .quiz-chat__max-t{ margin:0 0 .5rem; font-size:.9rem; font-weight:700; color:var(--ink,#E9E6E2); }
.quiz-card .quiz-chat__text{
  margin:0 0 .7rem; padding:.65rem .75rem; max-height:11.5rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere;
  font-size:.85rem; line-height:1.45; color:var(--ink,#E9E6E2); border-radius:10px;
  background:rgba(127,127,127,.12); user-select:text; -webkit-user-select:text;
}
.quiz-card .quiz-chat__text a{ color:var(--terra-text,#8FD3BE); text-decoration:underline; text-underline-offset:2px; }
.quiz-card .quiz-chat__max-btns{ display:grid; grid-template-columns:1fr; gap:.5rem; }
@media (min-width:520px){ .quiz-card .quiz-chat__max-btns{ grid-template-columns:1fr 1fr; } }
.quiz-card .quiz-chat__copy, .quiz-card .quiz-chat__open{
  display:flex; align-items:center; justify-content:center; min-height:44px; padding:.55rem 1rem; border-radius:999px;
  font:inherit; font-size:.92rem; font-weight:700; text-decoration:none; cursor:pointer; border:0; text-align:center;
}
.quiz-card .quiz-chat__copy{ color:var(--ink,#E9E6E2); background:transparent; box-shadow:inset 0 0 0 1.5px var(--line,rgba(255,255,255,.22)); }
.quiz-card .quiz-chat__copy.is-done{ box-shadow:inset 0 0 0 2px var(--terra-text,#8FD3BE); }
.quiz-card .quiz-chat__copy.is-done::before{ content:"✓ "; white-space:pre; }
.quiz-card .quiz-chat__open{ color:#fff; background:var(--terra,#106855); }
.quiz-card .quiz-chat__open:hover{ filter:brightness(1.1); }
.quiz-card .quiz-chat__status{ margin:.5rem 0 0; font-size:.85rem; line-height:1.4; color:var(--terra-text,#8FD3BE); }
.quiz-card .quiz-chat__status:empty{ display:none; }
/* разделитель «или оставьте контакт» */
.quiz-card .quiz-chat__or{ display:flex; align-items:center; gap:.7rem; margin:0 0 .8rem; font-size:.85rem; color:var(--ink-soft,#C9C4BE); }
.quiz-card .quiz-chat__or::before, .quiz-card .quiz-chat__or::after{ content:""; flex:1 1 1rem; height:1px; background:var(--line,rgba(255,255,255,.14)); }
.quiz-card .quiz-chat__or span{ flex:0 1 auto; text-align:center; }
/* узкий телефон: внутри карточки ~240 px — кнопки в одну строку текста, без переноса «Telegram» */
@media (max-width:420px){
  .quiz-card .quiz-chat{ padding:.7rem .65rem .75rem; }
  .quiz-card .quiz-chat__t{ font-size:.9rem; }
  .quiz-card .quiz-chat__btn{ padding:.55rem .6rem; font-size:.9rem; gap:.45rem; }
  .quiz-card .quiz-chat__lbl{ white-space:nowrap; }
}