/* =========================
   RANGA Calculator (InSales / Loft) - FINAL FIX
   Полностью ЗАМЕНИ содержимое custom.css на этот код
   ========================= */


.calculator input[type="text"]{
  background:#fff;
  border-radius:4px;
  height:40px;
  font-size:12px;
}

/* Изоляция от темы */
.ranga-scope, .ranga-scope *{
  box-sizing:border-box;
}

/* Контейнер калькулятора — как на оригинале (не на всю ширину) */
.ranga-scope .calculator{
  width:100%;
 
  max-width: var(--layout-content-max-width);
  margin:0 auto;
  padding:0 15px;
}

/* Тема Loft прячет aside глобально — возвращаем ТОЛЬКО внутри калькулятора */
.page_layout-clear .ranga-scope aside{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* ВАЖНО: сетка находится внутри #root > section (там aside + main).
   Делаем 2 колонки: слева шаги, справа карточки */
.page_layout-clear .ranga-scope #root > section{
  display:grid !important;
  grid-template-columns:320px minmax(0, 1fr) !important;
  gap:0 !important;
  align-items:start !important;
}

/* Чтобы правая колонка не “вылезала” */
.page_layout-clear .ranga-scope #root > section > *{
  min-width:0 !important;
}

/* Левый блок (шаги) */
.page_layout-clear .ranga-scope #root > section > aside{
  width:320px !important;
  max-width:320px !important;
}

/* Правая часть (контент) */
.page_layout-clear .ranga-scope #root > section > main{
  min-width:0 !important;
  width:100% !important;
}

/* --------- Стили шага/сайдбара (приближаем к оригиналу) --------- */

/* кнопки шагов */
.ranga-scope aside [class*="navigation-button"]{
  width:100%;
  display:block;
  padding:26px 22px;
  border:1px solid #eee;
  background:#fff;
  cursor:pointer;
  text-align:center;
}

/* расстояние между шагами убираем, если тема добавила */
.ranga-scope aside [class*="navigation-button"] + [class*="navigation-button"]{
  border-top:none;
}

/* активный шаг (как в оригинале: светлая заливка) */
.ranga-scope aside [class*="navigation-button"][class*="active_"],
.ranga-scope aside [class*="navigation-button"].active{
  background:#f1f1f1;
  border-color:#e5e5e5;
}

/* --------- Подсветка выбранной карточки/элемента в main --------- */
/* (не лезем в цвета, просто делаем нормальную подсветку) */
.ranga-scope main [class*="active_"],
.ranga-scope main [class*="selected_"],
.ranga-scope main .active,
.ranga-scope main .selected{
  outline:2px solid rgba(227, 30, 36, 0.35);
  outline-offset:-2px;
}

/* hover карточек (если тема убила) */
.ranga-scope main [class*="card"]:hover,
.ranga-scope main [class*="tile"]:hover,
.ranga-scope main [class*="item"]:hover{
  background:rgba(0,0,0,0.03);
}

/* --------- Мобильная версия --------- */
@media (max-width:768px){
  .page_layout-clear .ranga-scope #root > section{
    grid-template-columns:1fr !important;
  }
  .page_layout-clear .ranga-scope #root > section > aside{
    width:100% !important;
    max-width:100% !important;
  }
}

.ranga-scope aside [class*="navigation-button"] {
  width: 100%;
  display: block;
  padding: 26px 22px;
  border: 1px solid #eee;
  background: #fff;
    background-color: rgb(255, 255, 255);
  cursor: pointer;
  text-align: center;
  background-color: transparent;
  border: none;
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
  border-bottom-width: medium;
  border-bottom-style: none;
  border-bottom-color: currentcolor;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  margin: 0;
  padding: 0;
}
/*.layout__content {
  text-align: center;
}*/
.navigation-button_HjZDx.active_BhAEo {
  background-color: #ececec;
}