.lm-quiz{border:1px solid #eee;border-radius:14px;padding:16px}
.lmq-head h2{margin:0;}
@media (min-width: 767px) {
  .lmq-head h2{font-size: 32px;}
}
.lmq-cart .lmq-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(243px,1fr));gap:12px;margin:32px 0px;}
.lmq-card--add .lmq-card__name {font-size: 24px;color:#fabb34;}
.lmq-cart .lmq-card{border:1px solid #e4e4e4;border-radius:5px;overflow:hidden;display:flex;flex-direction:column;padding:0px 16px 16px;box-shadow:none;}
.lmq-card__img{display:block;aspect-ratio:4/3;background:#fafafa}
.lmq-cart .lmq-card__img img{width:100%;height:100%;object-fit:cover}
.lmq-cart .lmq-card__top {margin-top: 16px;}
.lmq-cart .lmq-pill {font-size:12px;line-height:1;color:#455A64;background-color:#EBEBEB;border-radius:5px;padding:3px;width:fit-content;margin-bottom: 6px;}
.lmq-card__meta{padding:10px 12px}
.lmq-card__name{font-weight:600;margin-bottom:6px;line-height: 1;color:#26272F;}
.lmq-cart .lmq-brand {font-size:12px;line-height:1;color:#455A64;margin-bottom: 12px;}
.lmq-card__price{font-size:14px}
.lmq-cart .lmq-public {padding: 6px;}
.lmq-cart .lmq-member-label {font-size: 12px;}
.lmq-cart .lmq-member-price {font-weight: 600;font-size: 16px;color:#26272F;}
.lmq-cart .lmq-member-row .lmq-unit {color:#26272F;opacity: 1;}
.lmq-cart .lmq-discount {font-size: 12px;}
.lmq-unit{opacity:.7;margin-left:4px}
.lmq-cart .lmq-card__rm{margin:0px 0px 10px auto;cursor:pointer;padding:0;background:none;font-size:32px;font-weight:400;line-height:1;min-height: 32px;}
.lmq-card--add{align-items:center;justify-content:center;text-align:center;color:#fabb34;}
.lmq-card .lmq-add__btn{font-size:36px;line-height:1;border:2px solid #fabb34;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;margin:28px 0 8px auto;margin-left:auto;margin-right:auto;cursor:pointer}
.lmq-cta{display:flex;justify-content:center;margin-top:16px}
.lmq-cart .lmq-next{border:0;border-radius:5px;padding:16px 50px;background:#fabb34;color:#26272F;font-weight:700;font-size: 20px;cursor:pointer}
.lmq-cart .lmq-next:hover {background-color:#fabb34; color:#fff;}
.lmq-next:disabled{opacity:.5;cursor:not-allowed}
.lmq-tip{text-align:center;padding: 12px 24px;border-radius: 5px;background-color: #dbdbdb;display: block;width: fit-content;margin: 0 auto;font-size: 14px;font-weight: 500;color:#000;}
.lmq-tip a {font-weight: 600;text-decoration: underline;}
.lmq-tip a:hover {color:#000; text-decoration: underline;}


/* LM QUIZ v0.1 */
.is-disabled{opacity:.5;pointer-events:none}
.lm-quiz__label{display:block;margin:6px 0}
.lm-quiz__field{margin:10px 0}
.lm-quiz__option{display:inline-block;margin:6px 8px 6px 0;padding:8px 12px;border:1px solid #ccc;border-radius:6px;background:#fafafa;cursor:pointer}
.lm-quiz__option[aria-checked="true"]{outline:2px solid #333;background:#fff}
.lm-quiz__input{padding:8px;border:1px solid #ccc;border-radius:6px;min-width:240px}

.lm-card--new-material{
  display:flex;align-items:center;justify-content:center;
  min-height:180px;border:1px dashed #e2e8f0;border-radius:10px;background:#fff;
}
.lm-card--new-material .lm-card__link{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;text-decoration:none;}
.lm-card--new-material .lm-card__plus{font-size:32px;line-height:1;}
.lm-card--new-material .lm-card__title{font-weight:600;color:#f4b400;}
.lm-card--new-material:hover{border-color:#f4b400;box-shadow:0 0 0 2px rgba(244,180,0,.15) inset;}


/* Layout */
.lm-quiz { padding: 32px 0 40px; }
.lmq-container { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.lmq-card { background:#fff; border:1px solid #e8edf3; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:28px; }

/* Заголовок шага */
.lm-quiz__label { font-size:22px; font-weight:700; text-align:center; margin:4px 0 18px; }

/* Список вариантов (как в макете) */
.lm-quiz__choices { display:flex; flex-direction:column; gap:12px; }
.lm-quiz__option {
  display:flex; align-items:center; width:100%;
  background:#fff; border:1.5px solid #dbe2ea; border-radius:8px;
  padding:14px 16px; font-weight:600; cursor:pointer; text-align:left;
  transition:box-shadow .15s, border-color .15s, background .15s;
}
.lm-quiz__option::before {
  content:""; width:18px; height:18px; flex:0 0 18px; margin-right:12px;
  border:2px solid #c8d0da; border-radius:50%;
}
.lm-quiz__option:hover { border-color:#cfd6df; }
.lm-quiz__option.is-active { border-color:#ffc400; box-shadow:0 0 0 3px rgba(255,196,0,.2); }
.lm-quiz__option.is-active::before { border-color:#ffc400; box-shadow: inset 0 0 0 5px #ffc400; }

/* Навигация и степпер */
.lm-quiz__nav { margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:16px; }

.lmq-stepper { display:flex; gap:28px; counter-reset: step; }
.lmq-stepper .lmq-step {
  position:relative; width:40px; height:40px; border-radius:50%;
  border:2px solid #e0e6ee; display:flex; align-items:center; justify-content:center;
  font-weight:600; color:#6b7786;
}
.lmq-stepper .lmq-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); }
.lmq-stepper .lmq-step.is-done { background:#111; color:#fff; border-color:#111; }
.lmq-stepper .lmq-step.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
  box-shadow:0 0 0 4px rgba(255,196,0,.2); /* оставляем жёлтое свечение */
}
.lmq-stepper .lmq-step.is-active::before { color:#fff; }


/* Линии между кружками (видимая связка + прогресс) */
.lmq-stepper{
  --lmq-step-gap: 28px;
  gap: var(--lmq-step-gap);
}

.lmq-stepper .lmq-step{
  background: #fff;       /* чтобы линия не "просвечивала" через круг */
  z-index: 1;
}

.lmq-stepper .lmq-step + .lmq-step::after{
  content:"";
  position:absolute;
  left: calc(-1 * var(--lmq-step-gap));
  top: 50%;
  transform: translateY(-50%);
  width: var(--lmq-step-gap);
  height: 2px;
  background: #e0e6ee;    /* базовая (будущие шаги) */
  z-index: 0;             /* НЕ -1, иначе линия пропадает под фоном */
}

/* Пройденный путь: если предыдущий шаг done → линия до текущего становится чёрной */
.lmq-stepper .lmq-step.is-done + .lmq-step::after{
  background: #111;
}


/* Кнопки */
.lm-quiz__back { display:none; } /* как в макете — только Next */
.lm-quiz__next, .lm-quiz__submit {
  min-width:160px; height:42px; border-radius:22px; border:none;
  background:#ffc400; color:#111; font-weight:700; padding:0 18px;
}
.lm-quiz__next:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:640px){
  .lmq-card { padding:18px; }
}


/* Ошибочные поля (если дальше будем проставлять aria-invalid) */
.lm-quiz__input[aria-invalid="true"],
.lm-quiz__select[aria-invalid="true"],
.lm-quiz__textarea[aria-invalid="true"]{
  border-color:#e11d48; box-shadow:0 0 0 2px rgba(225,29,72,.1);
}


/* Material tabs (current .lmq-tabs / .lmq-tab implementation) */
.lmq-tabs{
  display:flex;
  gap:5px;
  width:100%;
  margin:0 0 24px;
  padding:1px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

.lmq-tab{
  position:relative;
  flex:1 1 0;
  min-width:180px;
  height:40px;
  padding:6px 40px 6px 16px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-bottom:2px solid transparent;
  border-radius:6px 6px 0 0;
  background:#ebebeb;
  color:#26272f;

  font-size:14px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}

.lmq-tab:hover{
  background:#e3e3e3;
}

.lmq-tab.is-active{
  background:#ffffff;
  border-bottom-color:#f4b400;
}

.lmq-tab:focus-visible{
  outline:2px solid rgba(244,180,0,.45);
  outline-offset:2px;
}

/* validity marker */
.lmq-tab__mark{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 2px #fff;
  pointer-events:none;
}

.lmq-tab__mark::before{
  content:"✕";
  display:block;
  width:14px;
  height:14px;
  line-height:14px;
  font-size:11px;
  font-weight:700;
  text-align:center;
  color:#fff;
}

.lmq-tab__mark[data-valid="1"]{
  background:#22c55e;
}

.lmq-tab__mark[data-valid="1"]::before{
  content:"✓";
}

/* если материалов много — не ломаем ряд */
@media (max-width: 767px){
  .lmq-tabs{
    margin-bottom:18px;
  }

  .lmq-tab{
    min-width:150px;
    font-size:13px;
    padding:6px 34px 6px 12px;
  }

  .lmq-tab__mark{
    right:10px;
  }
}



/* ===== Installed Cart: "Your Installation in 3 Easy Steps" ===== */

.lm-installation {
  margin-top: 40px;
  margin-bottom: 40px;
}

.lm-installation__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Левый чёрный блок */

.lm-installation__left {
  flex: 1 1 auto;
  background: #191a1f;
  border-radius: 16px;
  padding: 48px;
  color: #ffffff;
}

.lm-installation__title {
  margin: 0 0 48px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 39px;
  color: #fff;
}

.lm-installation__steps {
  display: flex;
  gap: 20px;
}

.lm-installation-step {
  flex: 1 1 0;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.lm-installation-step__emoji {
  font-size: 48px;
  line-height: 1;
}

.lm-installation-step__title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
}

.lm-installation-step__text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #455a64;
}

/* Правый столбец преимуществ */

.lm-installation__benefits {
  width: 310px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.lm-installation-benefit {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #999999;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.lm-installation-benefit__emoji {
  font-size: 24px;
  line-height: 1;
}

.lm-installation-benefit__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
}

/* Адаптив: стекаем блоки на узких экранах */

@media (max-width: 1024px) {
  .lm-installation__benefits {
    width: auto;
  }
  .lm-installation-benefit {
    padding: 16px;
  }
  .lm-installation__left {
    padding: 24px;
  }
}
@media (max-width: 767px) {
  .lm-installation__inner {
    flex-direction: column;
  }
  .lm-installation__benefits {
    width: 100%;
  }
}
@media (max-width: 580px) {
  .lm-installation__steps {
    flex-direction: column;
  }
  .lmq-cart .lmq-next {
    font-size: 16px;
  }
  .lm-installation__title {
    font-size: 24px;
  }
  .lm-installation__left {
    width:100%;
  }
}


/* ===========================
   LM Quiz — base form UI (all steps)
   =========================== */

/* Карточка шага (общая) */
.lmq-card{
  background:#fff;
  border:1px solid #eef2f6;
  border-radius:6px;
}

/* Заголовки/тексты */
.lm-quiz__label{
  font-weight:600;
}

/* Поля ввода/селекты — единый вид */
.lm-quiz__input,
.lm-quiz select,
.lm-quiz textarea{
  border:1px solid #dbe2ea;
  border-radius:6px;
  height:56px;
  padding:0 16px;
  background:#fff;
}

/* textarea не должна быть 56px */
.lm-quiz textarea{
  height:auto;
  padding:16px;
}

/* Единый стиль option-строки (FIX: кружки в одну линию) */
.lm-quiz__option{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  text-align:left;
  box-sizing:border-box;

  border:1px solid #dbe2ea;
  border-radius:6px;
  min-height:56px;
  padding:16px;
  gap:24px;
  background:#fff;
}

/* Радио-кружок */
.lm-quiz__option::before{
  content:"";
  display:block;
  margin:0;

  width:24px;
  height:24px;
  flex:0 0 24px;
  border:1px solid #c8d0da;
  border-radius:50px;
  opacity:.5;
  box-sizing:border-box;
}


/* Hover/Active */
.lm-quiz__option:hover{ border-color:#cfd6df; }
.lm-quiz__option.is-active{
  border-color:#ffc400;
  box-shadow:0 0 0 3px rgba(255,196,0,.2);
}
.lm-quiz__option.is-active::before{
  opacity:1;
  border-color:#ffc400;
  box-shadow: inset 0 0 0 5px #ffc400;
}



/* ===========================
   LM Quiz — Step 1 (role) Figma
   (только геометрия; общий стиль option/radio берём из base form UI)
   =========================== */

.lmq-card.lmq-step-role{
  max-width: 539px;
  margin-left: auto;
  margin-right: auto;
  padding: 64px;
  border-radius: 6px;
}

/* Title spacing */
.lmq-card.lmq-step-role .lm-quiz__label{
  margin: 0 0 24px;
}

/* Options wrapper */
.lmq-card.lmq-step-role .lm-quiz__field.lm-quiz__options{
  max-width: 411px;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ===========================
   LM Quiz — Step 2 (zip_project) Figma
   (делаем геометрию как у Step 1)
   =========================== */

.lmq-card.lmq-step-zip_project{
  max-width: 539px;
  margin-left: auto;
  margin-right: auto;
  padding: 64px;
  border-radius: 6px;
}

/* Заголовки/отступы как на шаге 1 */
.lmq-card.lmq-step-zip_project .lm-quiz__label{
  margin: 0 0 24px;
}

/* Поля по ширине как опции (411px) */
.lmq-card.lmq-step-zip_project .lm-quiz__field{
  max-width: 411px;
  margin-left: auto;
  margin-right: auto;
}

/* Чтобы input/select не были "узкими" */
.lmq-card.lmq-step-zip_project .lm-quiz__input,
.lmq-card.lmq-step-zip_project select{
  width: 100%;
}


/* ===========================
   LM Quiz — center page layout (hard)
   =========================== */

main#primary.lm-quiz-page{
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: center;
}

main#primary.lm-quiz-page .lmq-container{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}



/* Quiz options: force left alignment (theme sets justify-content:center on all buttons) */
.lm-quiz__field.lm-quiz__options button.lm-quiz__option{
  justify-content: flex-start !important;
  text-align: left !important;
}


/* ===========================
   LM Quiz — Step 4 (contact) slab-like UI
   =========================== */

.lmq-card.lmq-step-contact{
  max-width: 760px;
  width: min(760px, calc(100vw - 32px));
  margin-left: auto;
  margin-right: auto;
  padding: 32px 22px 28px;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.lmq-card.lmq-step-contact .lmq-contact-head{
  margin: 0 0 22px;
}

.lmq-card.lmq-step-contact .lmq-contact-title{
  margin: 0 0 8px;
  text-align: center;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: #26272F;
}

.lmq-card.lmq-step-contact .lmq-contact-subtitle{
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: #26272F;
}

.lmq-card.lmq-step-contact .lmq-contact-subtitle a{
  color: inherit;
  text-decoration: underline;
}

.lmq-card.lmq-step-contact .lm-quiz__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lmq-card.lmq-step-contact .lm-quiz__grid > .lm-quiz__field{
  margin: 0;
}

.lmq-card.lmq-step-contact .lm-quiz__grid > .lm-quiz__field:nth-child(3),
.lmq-card.lmq-step-contact .lm-quiz__grid > .lm-quiz__field:nth-child(6){
  grid-column: 1 / -1;
}

.lmq-card.lmq-step-contact .lm-quiz__label{
  display: block;
  margin: 0 0 8px;
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #26272F;
}

.lmq-card.lmq-step-contact .lm-quiz__input,
.lmq-card.lmq-step-contact .lm-quiz__select,
.lmq-card.lmq-step-contact .lm-quiz__textarea{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dbe2ea;
  border-radius: 6px;
  background: #fff;
  min-height: 56px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.2;
  color: #26272F;
}

.lmq-card.lmq-step-contact .lm-quiz__textarea{
  min-height: 102px;
  padding: 16px;
  resize: vertical;
}

.lmq-card.lmq-step-contact .lm-quiz__input:focus,
.lmq-card.lmq-step-contact .lm-quiz__select:focus,
.lmq-card.lmq-step-contact .lm-quiz__textarea:focus{
  outline: none;
  border-color: #cfd6df;
  box-shadow: 0 0 0 2px rgba(255,196,0,.12);
}

.lm-quiz.lmq-step-contact .lm-quiz__nav{
  margin-top: 18px;
}

.lm-quiz.lmq-step-contact .lm-quiz__next{
  width: 100%;
  max-width: 760px;
  min-height: 56px;
  border: 0;
  border-radius: 5px;
  background: #fbbc34;
  color: #26272F;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.lm-quiz.lmq-step-contact .lm-quiz__next:hover{
  background: #fbbc34;
  color: #fff;
}

@media (max-width: 767px){
  .lmq-card.lmq-step-contact{
    width: min(760px, calc(100vw - 24px));
    padding: 24px 16px 20px;
  }

  .lmq-card.lmq-step-contact .lm-quiz__grid{
    grid-template-columns: 1fr;
  }

  .lmq-card.lmq-step-contact .lm-quiz__grid > .lm-quiz__field:nth-child(3),
  .lmq-card.lmq-step-contact .lm-quiz__grid > .lm-quiz__field:nth-child(6){
    grid-column: auto;
  }

  .lm-quiz.lmq-step-contact .lm-quiz__next{
    font-size: 18px;
  }
}


/* LMQ material step — restore 2-column layout */
.lmq-card.lmq-step-material{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px;
  background: #f7f7f7;
  border: 1px solid #eef2f6;
  border-radius: 6px;
  box-shadow: none;
}

.lmq-card.lmq-step-material .lmq-tabs{
  width: 100%;
  margin: 0 0 20px;
}

.lmq-card.lmq-step-material .lmq-body{
  width: 100%;
}

.lmq-card.lmq-step-material .lmq-material-layout{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.lmq-card.lmq-step-material .lmq-material-layout__card,
.lmq-card.lmq-step-material .lmq-material-layout__form{
  min-width: 0;
}

.lmq-card.lmq-step-material .lmq-material-layout__form .lm-quiz__label{
  display: block;
  margin: 0 0 8px;
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.lmq-card.lmq-step-material .lmq-material-layout__form .lm-quiz__field,
.lmq-card.lmq-step-material .lmq-material-layout__form .lm-quiz__input,
.lmq-card.lmq-step-material .lmq-material-layout__form .lm-quiz__select,
.lmq-card.lmq-step-material .lmq-material-layout__form select{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lmq-card.lmq-step-material .lmq-card--material{
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe2ea;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}

.lmq-card.lmq-step-material .lmq-card--material .lmq-card__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.lmq-card.lmq-step-material .lmq-card--material .lmq-card__body{
  padding: 14px 14px 16px;
}

.lmq-card.lmq-step-material .lmq-card--material .lmq-card__login{
  display: block;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 5px;
  text-align: center;
  background: #fbbc34;
  color: #26272F;
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 767px){
  .lmq-card.lmq-step-material{
    padding: 20px 16px 18px;
  }

  .lmq-card.lmq-step-material .lmq-material-layout{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}