/* ============================================================
   ПУМА Биллинг — CSS квиза (v4)
   Геометрию вопросов (отступы/паддинги/размеры вариантов) задаёт Webflow.
   Этот файл: состояния (выбор/актив/дизейбл), точка варианта,
   и ПОЛНОСТЬЮ изолированный блок результата (свои шрифты/размеры,
   чтобы стили страницы его не ломали).

   Палитра: фон #222A26 · карточка #323E38 · светлый #D5E7DE · лайм #9AEE65
   текст #E4F1EB · наборный #D5E7DE · красный #E97563 · оранж #F7B430 · зелёный #4E9A31
   ============================================================ */

/* ---------- 1. Варианты ответа ----------
   Нейтральный вид и отступы — вёрстка Webflow. Только курсор/hover/выбор. */
[data-opt] {
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, filter .15s ease;
  -webkit-user-select: none; user-select: none;
}
[data-opt]:hover { filter: brightness(1.12); }
[data-opt].is-selected {
  background: #4e9a31 !important;
  border-color: #9AEE65 !important;
}
[data-opt]:focus-visible {
  outline: 2px solid #9AEE65;
  outline-offset: 2px;
}
[data-opt]:hover .data-dot { background: #cfd8cf; }
[data-opt].is-selected .data-dot {
  background: #9AEE65 !important;
  box-shadow: 0 0 0 3px rgba(154, 238, 101, .25);
}

/* ---------- 2. Экраны и навигация ---------- */
[data-quiz="question"] { display: none !important; }
/* показываем активный экран, но НЕ навязываем display —
   пусть работает раскладка Webflow (flex + gap). */
[data-quiz="question"].is-active { display: flex !important; }

[data-quiz="result"] { display: none !important; }
[data-quiz="result"].is-active { display: block !important; }

/* доп.секция (форма + кнопка) — скрыта до результата; flex, как в Webflow */
[data-quiz="result-extra"] { display: none !important; }
[data-quiz="result-extra"].is-active { display: flex !important; }

[data-quiz="progress-bar"] { transition: width .35s ease; }

/* ============================================================
   СЕГМЕНТИРОВАННЫЙ ПРОГРЕСС (упрощённый)
   Разметка: quiz-progress-wrap > 4× quiz-progress[data-quiz=progress-seg]
   Внутренний bar НЕ нужен. Красится сам сегмент по классу is-filled.
   ============================================================ */
[data-quiz="progress-seg"] {
  background: #506359 !important;   /* серо-зелёный жёлоб по умолчанию */
  border-radius: 4px;
  overflow: hidden;
  transition: background .3s ease;
}
[data-quiz="progress-seg"].is-filled {
  background: #9AEE65 !important;    /* зелёный при заполнении */
}
/* если внутри всё же остался quiz-progress-bar — прячем его,
   чтобы он не перебивал цвет сегмента */
[data-quiz="progress-seg"] .quiz-progress-bar,
[data-quiz="progress-seg"] > div {
  background: transparent !important;
  width: 100%;
  height: 100%;
}

[data-quiz="next"].is-disabled {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}

/* кнопка «Скачать PDF»: спрятана, пока результат не наполнен (is-done) */
[data-quiz="download"] { display: none !important; }
[data-quiz="result"].is-done [data-quiz="download"],
[data-quiz="result-extra"].is-active [data-quiz="download"] { display: inline-flex !important; }
[data-quiz="download"].is-loading { opacity: .6; pointer-events: none; }


/* ============================================================
   3. ЭКРАННЫЙ РЕЗУЛЬТАТ — дизайн под PDF-отчёт.
   Изолированная зона: типографика задаётся жёстко, чтобы стили
   страницы не протекали. Палитра из отчёта.
   ============================================================ */
[data-quiz="result-body"] {
  color: #D5E7DE;
  font-family: "Gilroy", "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
  letter-spacing: normal;
  width: 100%;
  max-width: none;
  margin: 0;
}
[data-quiz="result-body"] * { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; }
[data-quiz="result-body"] svg { display: block; width: 100%; height: 100%; }

/* ---------- карточка вердикта (без фоновой плашки, только акцент слева) ---------- */
[data-quiz="result-body"] .pq-verdict {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: transparent;
  border-radius: 0;
  padding: 4px 0 4px 16px;
  margin-bottom: 22px;
  overflow: visible;
}
/* акцентная полоса — вертикальная «пилюля» слева */
[data-quiz="result-body"] .pq-verdict::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 5px;
  border-radius: 3px;
  background: #4E9A31;
}
[data-quiz="result-body"] .pq-verdict.pq-lvl-high::before { background: #E97563; }
[data-quiz="result-body"] .pq-verdict.pq-lvl-mid::before  { background: #F7B430; }
[data-quiz="result-body"] .pq-verdict.pq-lvl-low::before  { background: #9AEE65; }
[data-quiz="result-body"] .pq-verdict__main { flex: 1 1 auto; }
[data-quiz="result-body"] .pq-verdict__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E4F1EB;
  margin-bottom: 8px;
}
[data-quiz="result-body"] .pq-verdict__title {
  font-size: 24px;
  font-weight: 700;
  color: #E4F1EB;
  line-height: 1.15;
  margin-bottom: 8px;
}
[data-quiz="result-body"] .pq-lvl-high .pq-verdict__title { color: #E97563; }
[data-quiz="result-body"] .pq-lvl-mid  .pq-verdict__title { color: #F7B430; }
[data-quiz="result-body"] .pq-lvl-low  .pq-verdict__title { color: #9AEE65; }
[data-quiz="result-body"] .pq-verdict__text { font-size: 15px; color: #D5E7DE; }
[data-quiz="result-body"] .pq-verdict__scorebox { flex: 0 0 auto; text-align: right; }
[data-quiz="result-body"] .pq-verdict__score {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: #E4F1EB;
}
[data-quiz="result-body"] .pq-lvl-high .pq-verdict__score { color: #E97563; }
[data-quiz="result-body"] .pq-lvl-mid  .pq-verdict__score { color: #F7B430; }
[data-quiz="result-body"] .pq-lvl-low  .pq-verdict__score { color: #9AEE65; }
[data-quiz="result-body"] .pq-verdict__scorecap {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #A0B2A5;
  margin-top: 4px;
}

/* ---------- полоса риска ---------- */
[data-quiz="result-body"] .pq-riskbar { position: relative; margin: 0 0 34px; padding-top: 20px; }
[data-quiz="result-body"] .pq-riskbar__track {
  position: relative;
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: visible;
}
[data-quiz="result-body"] .pq-riskbar__seg { height: 100%; }
[data-quiz="result-body"] .pq-riskbar__seg--g { width: 29%;  background: #4E9A31; border-radius: 4px 0 0 4px; }
[data-quiz="result-body"] .pq-riskbar__seg--a { width: 25%;  background: #F7B430; }
[data-quiz="result-body"] .pq-riskbar__seg--r { width: 46%;  background: #E97563; border-radius: 0 4px 4px 0; }
[data-quiz="result-body"] .pq-riskbar__marker {
  position: absolute;
  top: 50%;
  width: 15px; height: 15px;
  background: #222A26;
  border: 3px solid #9AEE65;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
[data-quiz="result-body"] .pq-riskbar__val {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
}
[data-quiz="result-body"] .pq-riskbar__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #A0B2A5;
}

/* ---------- секции ---------- */
[data-quiz="result-body"] .pq-section { margin-bottom: 48px; }
[data-quiz="result-body"] .pq-section__title {
  font-size: 26px;
  font-weight: 700;
  color: #E4F1EB;
  margin-bottom: 8px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
[data-quiz="result-body"] .pq-section__title + * { margin-top: 14px; }
/* линия под заголовком секции */
[data-quiz="result-body"] .pq-section > .pq-section__title {
  padding-bottom: 12px;
  border-bottom: 1px solid #46544A;
}

/* ---------- ваши ответы ---------- */
[data-quiz="result-body"] .pq-answers { display: block; }
[data-quiz="result-body"] .pq-answers__q { font-size: 13px; color: #A0B2A5; margin-top: 18px; }
[data-quiz="result-body"] .pq-answers__q:first-child { margin-top: 0; }
[data-quiz="result-body"] .pq-answers__a { margin-top: 3px; color: #E4F1EB; font-size: 15px; font-weight: 700; }

/* ---------- findings ---------- */
[data-quiz="result-body"] .pq-find {
  background: #323E38;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
[data-quiz="result-body"] .pq-find__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
[data-quiz="result-body"] .pq-find__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  padding: 7px;
  background: #222A26;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-quiz="result-body"] .pq-find__icon svg { width: 100%; height: 100%; display: block; }
[data-quiz="result-body"] .pq-find__title {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  color: #E4F1EB;
  line-height: 1.25;
}
[data-quiz="result-body"] .pq-find__body { font-size: 14px; color: #D5E7DE; line-height: 1.6; }

/* тег severity */
[data-quiz="result-body"] .pq-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  background: #222A26;
  white-space: nowrap;
}
[data-quiz="result-body"] .pq-tag--high { color: #E97563; }
[data-quiz="result-body"] .pq-tag--mid  { color: #F7B430; }
[data-quiz="result-body"] .pq-tag--low  { color: #9AEE65; }

/* чип — моно на тёмной подложке */
[data-quiz="result-body"] .pq-chip {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85em;
  font-weight: 600;
  color: #9AB0A5;
  background: #222A26;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.4;
}

/* ---------- timeline ---------- */
[data-quiz="result-body"] .pq-timeline { list-style: none; }
[data-quiz="result-body"] .pq-timeline__row {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #46544A;
}
[data-quiz="result-body"] .pq-timeline__row:last-child { border-bottom: 0; }
[data-quiz="result-body"] .pq-timeline__when {
  flex: 0 0 96px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #F7B430;
  padding-top: 2px;
}
[data-quiz="result-body"] .pq-timeline__row.is-now .pq-timeline__when { color: #E97563; }
[data-quiz="result-body"] .pq-timeline__body { flex: 1 1 auto; }
[data-quiz="result-body"] .pq-timeline__what { color: #E4F1EB; font-size: 14px; margin-bottom: 3px; line-height: 1.45; }
[data-quiz="result-body"] .pq-timeline__cons { color: #A0B2A5; font-size: 13px; line-height: 1.45; }

/* ---------- вопросы по группам (аккордеон) ---------- */
[data-quiz="result-body"] .pq-group {
  background: #323E38;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 14px;
  cursor: pointer;
}
[data-quiz="result-body"] .pq-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
[data-quiz="result-body"] .pq-group__icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  padding: 7px;
  background: #222A26;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-quiz="result-body"] .pq-group__icon svg { width: 100%; height: 100%; display: block; }
[data-quiz="result-body"] .pq-group__who {
  flex: 1 1 auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9AEE65;
}
[data-quiz="result-body"] .pq-group__chev {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  transition: transform .25s ease;
}
[data-quiz="result-body"] .pq-group.is-open .pq-group__chev { transform: rotate(180deg); }
/* тело — свёрнуто по умолчанию, плавно раскрывается */
[data-quiz="result-body"] .pq-group__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
[data-quiz="result-body"] .pq-group.is-open .pq-group__body { grid-template-rows: 1fr; }
[data-quiz="result-body"] .pq-group__body > * { overflow: hidden; min-height: 0; }
[data-quiz="result-body"] .pq-group.is-open .pq-group__list { margin-top: 14px; }
[data-quiz="result-body"] .pq-group__list { list-style: none; counter-reset: q; }
[data-quiz="result-body"] .pq-group__list li {
  position: relative;
  counter-increment: q;
  padding: 5px 0 5px 26px;
  color: #D5E7DE;
  font-size: 14px;
  line-height: 1.5;
}
[data-quiz="result-body"] .pq-group__list li::before {
  content: counter(q) ".";
  position: absolute;
  left: 0; top: 5px;
  color: #9AEE65;
  font-weight: 700;
}

/* ---------- чек-лист (интерактивный) ---------- */
[data-quiz="result-body"] .pq-checklist { list-style: none; }
[data-quiz="result-body"] .pq-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #46544A;
  cursor: pointer;
}
[data-quiz="result-body"] .pq-checklist li:last-child { border-bottom: 0; }
[data-quiz="result-body"] .pq-checklist__box {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: 2px;
  border: 1.5px solid #9AEE65;
  border-radius: 4px;
  background: transparent;
  transition: background .12s ease;
}
[data-quiz="result-body"] .pq-checklist__box svg {
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .12s ease;
}
/* отмеченный пункт: зелёная заливка + видимая галочка */
[data-quiz="result-body"] .pq-checklist li.is-checked .pq-checklist__box { background: #9AEE65; }
[data-quiz="result-body"] .pq-checklist li.is-checked .pq-checklist__box svg { opacity: 1; }
[data-quiz="result-body"] .pq-checklist__txt { flex: 1 1 auto; color: #D5E7DE; font-size: 14px; line-height: 1.5; }

/* ---------- мобильные ---------- */
@media (max-width: 600px) {
  [data-quiz="result-body"] .pq-verdict { flex-direction: column; gap: 12px; }
  [data-quiz="result-body"] .pq-verdict__scorebox { text-align: left; }
  [data-quiz="result-body"] .pq-find__head { flex-wrap: wrap; }
  [data-quiz="result-body"] .pq-tag { order: 3; }
  [data-quiz="result-body"] .pq-timeline__row { flex-direction: column; gap: 4px; }
  [data-quiz="result-body"] .pq-timeline__when { flex-basis: auto; }
}