/* Quiz (WP-7), on the tokens of css/base.css. Class names use the k- prefix; breakpoints max-width 1199px, 1023px and 767px.
 *
 * Markup: template-parts/quiz.php; behaviour: js/quiz.js, which adds .is-enhanced and shows one step at a time.
 * Boards: Main and Usluga at 1440 (panel 7fr/5fr with «Ваш выбор» on the right), A-mobile-2 and Usluga-mobile-2 at
 * 390 (one column: steps, «Ваш выбор», buttons). 768–1023 keeps the desktop type in the one-column order.
 * The fields, checkboxes, submit, spinner and messages of the Contact Form 7 form look as on every other form
 * (css/dialogs.css); this file only lays them out inside the quiz, with «Назад» beside the submit.
 */

.k-quiz {
  padding: 72px 0;
  background: var(--k-band);
}

.k-quiz__title {
  margin: 0;
}

.k-quiz__lead {
  margin-top: 12px;
}

.k-quiz__lead p {
  margin: 0;
}

.k-quiz__lead p + p {
  margin-top: 8px;
}

/* In the quiz dialog (template-parts/dialogs.php) the box is the dialog's: no band, no panel frame or padding. */
.k-quiz.k-quiz--dialog {
  padding: 0;
  background: none;
}

.k-quiz--dialog .k-quiz__panel {
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
}

@media (max-width: 767px) {
  .k-quiz--dialog .k-quiz__panel {
    margin-top: 16px;
  }
}

/* Panel: progress, steps and buttons on the left, «Ваш выбор» on the right */

.k-quiz__panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "progress choice"
    "steps choice"
    "nav choice";
  column-gap: 40px;
  margin-top: 32px;
  padding: 32px;
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  background: var(--k-white);
}

.k-quiz__progress {
  grid-area: progress;
}

.k-quiz__progress-label {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}

.k-quiz__bar {
  height: 6px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--k-hairline);
  /* High-contrast modes would paint both parts in one system colour */
  forced-color-adjust: none;
}

.k-quiz__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--k-blue);
  transition: width .2s ease;
}

/* The question and 140 px of answers: a step with a text field (before content bundle 2) keeps the buttons in place */
.k-quiz__steps {
  grid-area: steps;
  min-height: 186px;
  margin-top: 24px;
}

.k-quiz__step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.k-quiz__step:focus,
.k-quiz__step:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Without the script every step shows, one under another */
.k-quiz:not(.is-enhanced) .k-quiz__step + .k-quiz__step {
  margin-top: 32px;
}

.k-quiz__question {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--k-ink);
}

/* Answer tiles: a native radio over the whole tile, the drawn mark beside the text */

.k-quiz__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  min-height: 140px;
  margin-top: 20px;
}

.k-quiz__tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 16px;
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-control);
  background: var(--k-white);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;
}

.k-quiz__radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.k-quiz__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--k-muted);
  border-radius: 999px;
  background: var(--k-white);
  color: var(--k-white);
}

.k-quiz__tile.is-checked,
.k-quiz__tile:has(.k-quiz__radio:checked) {
  padding: 7px 15px;
  border: 2px solid var(--k-blue);
}

/* The tick shows on the chosen answer only (not by colour, so it stays right in high-contrast modes too) */
.k-quiz__check {
  visibility: hidden;
}

.k-quiz__radio:checked + .k-quiz__mark {
  border-color: var(--k-blue);
  background: var(--k-blue);
}

.k-quiz__radio:checked + .k-quiz__mark .k-quiz__check {
  visibility: visible;
}

/* The keyboard focus ring goes round the tile; browsers without :has() ring the mark instead */
.k-quiz__radio:focus-visible {
  outline: none;
  box-shadow: none;
}

.k-quiz__tile:has(.k-quiz__radio:focus-visible) {
  outline: 2px solid var(--k-ink);
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--k-focus);
}

@supports not selector(:has(*)) {
  .k-quiz__radio:focus-visible + .k-quiz__mark {
    outline: 2px solid var(--k-ink);
    box-shadow: 0 0 0 5px var(--k-focus);
  }
}

@media (hover: hover) {
  .k-quiz__tile:hover {
    border-color: var(--k-blue);
  }
}

/* A stored text question (before content bundle 2: «Населенный пункт») */
.k-quiz__input {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 48px;
  margin-top: 20px;
  padding: 0 14px;
  border: 1px solid var(--k-muted);
  border-radius: var(--k-radius-control);
  background: var(--k-white);
  font-size: 16px;
}

/* Buttons */

.k-quiz__nav {
  display: flex;
  grid-area: nav;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.k-quiz__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--k-radius-control);
  background: transparent;
  color: var(--k-ink);
  font-size: 16px;
  font-weight: 700;
}

.k-quiz__back:disabled {
  color: var(--k-muted);
  opacity: .55;
  cursor: default;
}

.k-quiz__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--k-radius-control);
  background: var(--k-blue);
  color: var(--k-white);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.k-quiz__next:hover {
  background: var(--k-blue-hover);
}

/* Contact step: phone and name side by side, the consent boxes, then «Назад» (moved here by the script) and «Рассчитать»
 * (as narrow as «Далее» on desktops, the rest of the row on phones). A flex row instead of the shared form grid, so the
 * two buttons share a line; anything else the form holds keeps its own place after them. Below 1024 px the script also
 * moves «Ваш выбор» in, between the boxes and the buttons, as on the other steps. */

.k-quiz__step--form .wpcf7 {
  margin-top: 20px;
}

.k-quiz .k-form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.k-quiz .k-form > * {
  order: 6;
}

.k-quiz .k-form > .k-field {
  flex: 1 1 calc(50% - 6px);
  order: 1;
  min-width: 0;
}

.k-quiz .k-form > .k-consent {
  flex: 1 0 100%;
  order: 2;
  margin-top: 2px;
}

.k-quiz .k-form > .k-quiz__choice {
  flex: 1 0 100%;
  order: 3;
}

.k-quiz .k-form > .k-quiz__back {
  order: 4;
  margin-top: 16px;
}

.k-quiz .k-form > .wpcf7-submit {
  order: 5;
  width: auto;
  margin: 16px 0 0 auto;
  padding: 0 28px;
}

/* «Ваш выбор» */

.k-quiz__choice {
  display: flex;
  flex-direction: column;
  grid-area: choice;
  padding: 24px;
  border-radius: var(--k-radius-card);
  background: var(--k-band);
}

.k-quiz__choice-title {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--k-muted);
}

.k-quiz__choice-main {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--k-ink);
}

.k-quiz__choice-main.is-empty {
  color: var(--k-muted);
}

.k-quiz__choice-item {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.45;
}

.k-quiz__choice-item + .k-quiz__choice-item {
  margin-top: 6px;
}

.k-quiz__prices {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 44px;
  margin-top: auto;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.k-quiz__prices svg {
  flex: none;
}

/* 768–1023: one column; «Ваш выбор» between the steps and the buttons, as on phones */

@media (max-width: 1023px) {
  .k-quiz__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "progress"
      "steps"
      "choice"
      "nav";
    padding: 24px;
  }

  .k-quiz__choice {
    margin-top: 24px;
  }

  .k-quiz__choice-body {
    margin-bottom: 8px;
  }

  .k-quiz__nav {
    margin-top: 24px;
  }

  /* Contact step: the same 24 px above and below «Ваш выбор» as on the other steps (with the form's 12 px gap) */
  .k-quiz .k-form > .k-quiz__choice,
  .k-quiz .k-form > .k-quiz__choice ~ .k-quiz__back,
  .k-quiz .k-form > .k-quiz__choice ~ .wpcf7-submit {
    margin-top: 12px;
  }
}

/* Phones: the A-mobile-2 board */

@media (max-width: 767px) {
  .k-quiz {
    padding: 24px 0 28px;
  }

  .k-quiz__panel {
    margin-top: 16px;
    padding: 16px;
  }

  .k-quiz__progress-label {
    font-size: 14px;
    line-height: 20px;
  }

  .k-quiz__bar {
    margin-top: 8px;
    border-radius: 3px;
  }

  .k-quiz__bar-fill {
    border-radius: 3px;
  }

  /* As on the board, the question keeps two lines and the answers 166 px, so «Ваш выбор» and the buttons stay in one
     place on every step */
  .k-quiz__steps {
    min-height: 230px;
    margin-top: 14px;
  }

  .k-quiz__question {
    min-height: 50px;
    line-height: 25px;
  }

  .k-quiz__tiles {
    gap: 8px;
    margin-top: 14px;
  }

  .k-quiz__tile,
  .k-quiz__tile.is-checked,
  .k-quiz__tile:has(.k-quiz__radio:checked) {
    min-height: 79px;
    padding: 0 12px;
    font-size: 15px;
    line-height: 18px;
  }

  .k-quiz__tile.is-checked,
  .k-quiz__tile:has(.k-quiz__radio:checked) {
    padding: 0 11px;
  }

  /* The mark becomes the corner tick of the chosen tile */
  .k-quiz__mark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border: 0;
    background: transparent;
    color: var(--k-blue);
  }

  .k-quiz__mark svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
  }

  .k-quiz__radio:checked + .k-quiz__mark {
    background: transparent;
  }

  .k-quiz__input {
    max-width: none;
    margin-top: 14px;
  }

  .k-quiz__choice {
    margin-top: 12px;
    padding: 10px 14px 4px;
    border-radius: var(--k-radius-control);
  }

  /* Three lines are kept for the picks, as on the board, so the buttons below do not jump while choosing (js/quiz.js
     keeps room for the longest term answer when a card's kit needs more); the 20 px line is set on the box itself, so
     the line boxes of the inline picks keep it */
  .k-quiz__choice-body {
    min-height: 62px;
    margin: 0;
    padding-top: 2px;
    font-size: 15px;
    line-height: 20px;
  }

  .k-quiz__choice-title {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
  }

  /* One line of picks: «Молоток · На 2–3 смены» */
  .k-quiz__choice-main,
  .k-quiz__choice-item,
  .k-quiz__choice-item + .k-quiz__choice-item {
    display: inline;
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
  }

  .k-quiz__choice-main ~ .k-quiz__choice-item:not([hidden])::before {
    content: " · ";
  }

  /* 1 px: with the icon's own side bearing it makes the space before the board's «↑» (A-mobile-2). */
  .k-quiz__prices {
    position: relative;
    min-height: 32px;
    margin-top: 0;
    gap: 1px;
    font-size: 15px;
  }

  .k-quiz__prices::after {
    content: "";
    position: absolute;
    inset: -6px 0;
  }

  .k-quiz__prices svg {
    width: 16px;
    height: 16px;
  }

  .k-quiz__nav {
    gap: 8px;
    margin-top: 14px;
  }

  .k-quiz__back {
    flex: none;
    gap: 2px;
    padding: 0 16px;
    border: 1.5px solid var(--k-ink);
    background: var(--k-white);
  }

  .k-quiz__back svg {
    width: 16px;
    height: 16px;
  }

  .k-quiz__back:disabled {
    border: 1px solid var(--k-hairline);
    color: var(--k-muted);
    opacity: 1;
    cursor: not-allowed;
  }

  .k-quiz__next,
  .k-quiz .k-form > .wpcf7-submit {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 16px;
  }

  .k-quiz__step--form .wpcf7 {
    margin-top: 14px;
  }

  .k-quiz .k-form {
    gap: 8px;
  }

  .k-quiz .k-form > .k-field {
    flex-basis: calc(50% - 4px);
  }

  .k-quiz .k-form > .k-consent {
    margin-top: 0;
  }

  /* With the form's 8 px gap: 12 px above «Ваш выбор» and 14 px above the buttons, as on the other steps */
  .k-quiz .k-form > .k-quiz__choice {
    margin-top: 4px;
  }

  .k-quiz .k-form > .k-quiz__back,
  .k-quiz .k-form > .wpcf7-submit,
  .k-quiz .k-form > .k-quiz__choice ~ .k-quiz__back,
  .k-quiz .k-form > .k-quiz__choice ~ .wpcf7-submit {
    margin: 6px 0 0;
  }
}

/* Narrow phones: the two fields one under the other, and the answers in one column: two 123 px tiles leave 99 px of
   text, less than «Пескоструйное», and the chosen tile's tick would cover the word. The right padding keeps the text
   clear of the tick. */

@media (max-width: 359px) {
  .k-quiz .k-form > .k-field {
    flex-basis: 100%;
  }

  .k-quiz__tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .k-quiz__tile,
  .k-quiz__tile.is-checked,
  .k-quiz__tile:has(.k-quiz__radio:checked) {
    min-height: 56px;
    padding: 8px 28px 8px 12px;
  }

  .k-quiz__tile.is-checked,
  .k-quiz__tile:has(.k-quiz__radio:checked) {
    padding: 7px 27px 7px 11px;
  }
}