/* Стили калькулятора.

   Вынуты из custom-style.css старой темы: там они лежат вперемешку с
   оформлением прежней шапки и подвала, а на странице редизайна нужна
   только эта часть. Файл style-kalk.css, который подключал старый
   шаблон, пустой — поэтому кнопки выглядели как обычные ссылки. */

/* calculator */
.calc-dropdown{position: relative;
    border: 1px solid #d2d2d2;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;}
.calc-dropdown__content{background: white;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
    z-index: 999;}
.calc-dropdown:hover .calc-dropdown__content{max-height: 150px;
    overflow: auto;}
.main__button__scroll__item,
.calc-dropdown__item{border-bottom: 1px solid #d5d5d5;
    padding: 10px;}
.calc-dropdown__title{font-weight: 600;
    font-size: 22px;}
.calc-cost{text-align: center;
    font-weight: 600;
    font-size: 26px;
    background: #4ac3c1;
    color: white;
    border-radius: 10px;
    padding: 15px;
    width: 100%;}

/* Плашка с итоговой ценой: в старой теме бирюзовая, в редизайне акцент синий. */
.calc-cost{
  margin-top:16px;
  padding:18px 24px;
  border-radius:14px;
  background:#eef4fa;
  color:#5b7590;
  font-size:19px;
  font-weight:800;
  transition:background .2s, color .2s;
}
.calc-cost:not(.cost_noactive){
  background:#005ca5;
  color:#fff;
}

/* Картинка приходит из медиатеки в натуральные 577 px и распирала телефон. */
#phoneMove{max-width:100%;height:auto;}

@media (max-width:600px){
  .calculator-section .main__button__wrap,
  .calculator-section .main__button{max-width:100%;box-sizing:border-box;}
  .calculator-section .container{overflow-x:clip;}
}

/* Приводим калькулятор к оформлению остального сайта.

   Разметка досталась от старой темы и цвета брала оттуда же: подписи выходили
   блёклыми, пункты списка — то оранжевыми, то синими, границы серые. Форма и
   поведение остаются прежними, меняется только вид. */
.calculator-section .calc-dropdown{
  border:1px solid #dbe8f3;
  border-radius:14px;
  background:#fff;
  transition:border-color .18s, box-shadow .18s;
}
.calculator-section .calc-dropdown:hover{
  border-color:#9fc5df;
  box-shadow:0 14px 30px -22px rgba(7,51,96,.5);
}
.calculator-section .calc-dropdown__title{
  color:#0a2540;
  font-size:17px;
  font-weight:750;
  letter-spacing:-.01em;
}
.calculator-section .calc-dropdown__item{
  color:#33536f;
  font-size:15px;
  font-weight:600;
  border-bottom:1px solid #eef3f8;
  border-radius:8px;
  transition:background .15s, color .15s;
}
.calculator-section .calc-dropdown__item:last-child{border-bottom:0;}
.calculator-section .calc-dropdown__item:hover{
  background:#f1f7fc;
  color:#005ca5;
}
/* Выбранное значение подставляется в эту подпись поверх заголовка. */
.calculator-section .calc-dropdown--checked{
  color:#005ca5;
  font-weight:800;
}