:root{
  --accent:#D52923; --accent-ghost:rgba(213,41,35,.12);
  --text:#0f172a; --muted:#6b7280; --border:#e5e7eb; --bg:#fafafa; --white:#fff;
  --radius:12px; --shadow:0 6px 24px rgba(15,23,42,.08),0 2px 8px rgba(15,23,42,.06);
  --fz-12:12px; --fz-14:14px; --fz-16:16px; --fz-18:18px; --fz-22:22px;
}
*,*:before,*:after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit}

/* контейнер */


/* вкладки типа устройства */
.top-tabs{display:flex;gap:20px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.top-tabs__btn{position:relative;padding:10px 0;font-weight:600;color:#6b7280;cursor:pointer}
.top-tabs__btn.is-active{color:var(--accent)}
.top-tabs__btn.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}



/* шаги */
.step{position:relative;padding:18px 18px 18px 56px;}
.step:first-of-type{border-top:none}
.step::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:2px;background:var(--accent-ghost)}
.step--first::before{top:32px}
.step--last::before{bottom:calc(100% - 32px)}
.step__num{position:absolute;left:12px;top:18px;width:28px;height:28px;display:grid;place-items:center;border-radius:6px;background:var(--accent);color:#fff;font-weight:700;box-shadow:0 0 0 3px #fff}
.step__title{
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  color: #000;
}
.step__body{display:grid;gap:16px}
.step--locked{opacity:.55;pointer-events:none}
.step--done::before,.step--active::before{background:var(--accent)}

.field__label{
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  color: #414141;
}
.field__label span{
  color: #D52923;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
  line-height: 120%;
} 
.step__body.grid-2{
  display: flex;
  gap: 50px;
  margin-top: 30px;
}
.range_title{
  font-size: 16px;
  color: #000;
  margin-bottom: 15px;
  font-weight: bold;
}

.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* поле */
.field{display:flex;flex-direction:column;gap:6px; margin-bottom: 25px;}
.field__label{font-size:var(--fz-14);color:#475569}
.field__input{height:40px;border:1px solid var(--border);border-radius:10px;padding:0 10px;font-size:var(--fz-16)}
.field__input:focus{outline:2px solid color-mix(in oklab, var(--accent) 35%, transparent)}
.field__input[aria-invalid="true"]{border-color:var(--accent)}
.field__error{min-height:16px;color:var(--accent);font-size:13px; font-weight: bold;}
.req{color:var(--accent)}

/* набор опций крыши */
.fieldset{display:flex;gap:12px;flex-wrap:wrap;padding: 0px; border: 0px;}
.fieldset__title{font-weight:700;margin-bottom:6px;width:100%}
.roof-option__title{font-weight:600}
.schema{
  display: flex;
}
#roofImg{
  width: 100%;
  height: auto;
}
.step__body_1_1{
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.step__body_1{
  width: 40%;
}
.step__body_2{
  width: 60%;
}

/* range sliders с двуцветной дорожкой */
.range{display:flex;flex-direction:column;gap:6px}
.range__labels{display:flex;justify-content:space-between;font-weight:700}
.range__labels span:first-child{color:#2563eb}
.range__labels span:last-child{color:#ef4444}
.range__input{appearance:none;width:100%;height:4px;background: linear-gradient(90deg, #2279DA 0%, #6D97C7 28.37%, #DFB073 50%, #CF806A 70.67%, #EB6640 100%);;border-radius:999px;outline:none}
.range__input::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:none;box-shadow:0 0 0 3px var(--white)}
.range__input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:none}

/* радио-карточки с описанием */


.rc__head{display:flex;gap:8px;align-items:center;}
.rc__head input{position:absolute;opacity:0}

.rc_text{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #000;
}
.rc__label{
  background-color: #F5F5F5;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  border: 1px solid #F5F5F5;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.rc__label:hover{
  color: #D52923;
  border-color: #D52923;
  background-color: white;
}
.rc:has(input:checked) .rc__label{
  color: #D52923;
  border-color: #D52923;
  font-weight: bold;
  background-color: white;
}
.step_3 .flex-group{
  display: flex;
  gap: 20px;
  flex-direction: column;
  margin-bottom: 25px;
  width: 35%;
}
.step_3 .flex-group-1{
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.rc__text{
  color: #000;
  font-size: 16px;
  margin-bottom: 10px;
}
.step_3 .flex-group-2{
  border: 1px solid #F5F5F5;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  box-shadow: 0px 2px 6px 0px rgba(20, 20, 43, 0.04);
  background: rgba(255, 255, 255, 1);
}
.step_3 .grid-2{
  display: flex;
  gap: 100px;
}

/* pill buttons */
.heat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:640px){.heat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pill{display:block}
.pill input{position:absolute;opacity:0}
.pill span{
  background-color: #F5F5F5;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  border: 1px solid #F5F5F5;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.pill span:hover{
  color: #D52923;
  border-color: #D52923;
  font-weight: bold;
  background-color: white;
}
.pill:has(input:checked) span{
  color: #D52923;
  border-color: #D52923;
  font-weight: bold;
  background-color: white;
}

.heat-grid{
  display: flex;
  gap: 20px;
}
/* Рекомендации */

.badge{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-weight:700;background:#fff}
.summary__row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.summary__note{color:#64748b;font-size:var(--fz-14)}

/* скрытый блок */
[hidden]{display:none !important}

.top-tabs .top-tabs__btn.is-active{
  background-color: inherit;
  text-transform: inherit;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}    
.top-tabs__btn{
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  color: #000;
  background-color: inherit;
  text-transform: inherit;
}
.top-tabs__btn:hover{
  background-color: inherit;
  color: #D52923;
}


.roof-option{
  position:relative;
  padding:10px 12px 10px 44px;
  border:1px solid var(--c-border);      /* серый бордер по умолчанию */
  background:#fff;
  border-radius:12px;
  cursor: pointer;
}
.roof-option input{position:absolute;opacity:0;pointer-events:none}

/* Квадратик слева — всегда белый, с серой рамкой */
.roof-option::before{
  content:"";
  position:absolute;left:12px;top:50%;
  width:20px;height:20px;
  border:2px solid var(--c-border);
  border-radius:6px;background:#fff;
  transform:translateY(-50%);
  transition:.2s;
  border: 1px solid #D52923;
}

/* Галочка скрыта по умолчанию (НЕ выбрано) */
.roof-option::after{
  content:"";
  position:absolute;left:18px;top:50%;
  width:10px;height:6px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-60%) rotate(-45deg);
  opacity:0;                               /* скрыта */
  transition:.15s;
}

/* Выбрано: красный квадратик + показываем птичку */
.roof-option:has(input:checked){
  border-color:#D52923;
}
.roof-option:has(input:checked)::before{
  background:#D52923;
  border-color:#D52923;
}
.roof-option:has(input:checked)::after{
  opacity:1;                               /* показываем галочку */
}

/* доступность для клавиатуры */
.roof-option:has(input:focus-visible){outline:2px solid color-mix(in oklab, var(--c-accent) 35%, transparent);outline-offset:2px}

.step__body_2{
  display: flex;
  gap: 30px;
  padding-top: 65px;
}
.step__body_2 .grid-3{
  width: 50%;
}
.step__body_2 .grid-2{
  width: 50%;
}
.field__input{
  border-radius: 10px !important;
  border: 1px solid var(--Light-Grey, #F5F5F5) !important;
  background: #FBFBFB !important;
  text-align: left !important;
  padding: 5px 10px !important;
}
.result_temp{
  box-sizing: border-box;
  border: 1px solid #D52923;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  padding: 8px 16px;
}
.summary__note{
  font-size: 18px;
  color: #000;
}
#productsGrid .products{
  display: flex;
  flex-wrap: wrap;
}
#productsGrid .products .product-grid-item{
  width: 100%;
  max-width: 100%;
  margin-bottom: 50px;
}
#productsGrid .products .product-grid-item .product-wrapper{
  padding: 10px 15px;
}
.product-select{
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.product-select-wrap{
  position: absolute;
  right: 35px;
  top: 25px;
}
.product-required-qty{
  padding: 0px 20px;
  text-align: center;
  font-weight: bold;
  position: relative;
  top: -25px;
  font-size: 20px;
}
.products > .product-grid-item.product{
  width: 30% !important;
  max-width: 30% !important;
}

@media (max-width: 992px) { 
  .page-podbor-oborudovaniya .checkbox_form{
    font-size: 12px;
    line-height: 120%;
  }
  .fieldset{
    gap: 0px;
  }
  .step_3 .flex-group-1{
    justify-content: flex-start;
  }
  .step__body_1_1{
    flex-direction: column;
    gap: 30px;
  }
  .step__body_2{
    padding-top: 0px;
  }
  .step__body_1 {
    width: 100%;
  }
  .step__body_2 {
    width: 100%;
  }
  .rc_text{
    width: 100%;
    text-align: left;
    align-items: start;
    justify-content: flex-start;
  }
  .flex-group-1{
    flex-wrap: wrap;
    gap: 10px;
  }
  .step_3 .grid-2{
    gap: 10px;
    flex-direction: column;
  }
  .step_3 .flex-group{
    width: 100%;
  }
  .rc__label{
    padding: 8px 15px;
  }
  .step_3 .flex-group-1{
    gap: 10px;
  }
  .step_3 .flex-group{
    margin-bottom: 15px;
  }
  .heat-grid{
    flex-wrap: wrap;
    gap: 15px;
  }
  .step__title{
    font-size: 22px;
  }
  .result_temp{
    line-height: 50px;
  }
  .badge.result_temp{
    line-height: 30px !important;
  }
  .form_podbor{
    flex-direction: column;
    gap: 0px;
    margin-top: 0px;
  }
  .form_podbor_1 > p{
    margin-bottom: 0px;
  }
  .form_podbor_3 .submit_main{
    width: 100%;
    margin-top: 25px !important;
  }
  .form_podbor_3 .checkbox_form > p{
    top: 70px !important;
  }
}
@media (min-width: 370px) and (max-width: 455px) {
  .form_podbor_3 .checkbox_form > p{
      top: 90px !important;
    }
}