/* Калькулятор кредита v4. Всё ограничено .calculator-v4, чтобы не задеть v2/v3. */

/* Исходный выпадающий список периодов остаётся в DOM как источник данных */
.calculator-v4 .calculator-profit__field-select .select__wrapper.old {
   display: none;
}

/* Поле срока: единица измерения слева, ручной ввод справа */
.calculator-v4 .period-selector {
   display: flex;
   flex-direction: row-reverse;
}

.calculator-v4 .period-selector .calculator-profit__field-input {
   width: 100%;
}

.calculator-v4 .period-selector .field--converter .field-input {
   padding-left: 14px;
   border-radius: 0 20px 20px 0;
   text-align: left;
   border: solid 2px #f2f2f2;
   border-left: 0;
}

.calculator-v4 .period-selector__unit {
   display: flex;
   align-items: center;
   border-radius: 20px 0 0 20px;
   background-color: #f2f2f2;
   border: solid 2px #f2f2f2;
   border-right: 0;
   transition: .3s;
}

.calculator-v4 .calculator-profit__field-select .period-selector .select__current-content {
   height: 59px;
   width: 141px;
   padding: 0 40px 0 20px;
   margin-left: 5px;
   background-color: #fff;
   border-radius: 20px;
   font-weight: 600;
   color: #0b0d13;
   box-shadow: 0 4px 25px rgba(19, 25, 34, .1);
}

/* Если доступна одна единица измерения, список не раскрывается */
.calculator-v4 .period-selector__unit .select__current-content:not(.period-selector__toggle) {
   cursor: default;
}

.calculator-v4 .period-selector__unit .select__content {
   width: 100%;
   min-width: 160px;
}

.calculator-v4 .period-selector:hover .period-selector__unit,
.calculator-v4 .period-selector.focus .period-selector__unit {
   background-color: #fff;
   border-color: #f2f2f2;
}

.calculator-v4 .period-selector:hover .field--converter .field-input,
.calculator-v4 .period-selector.focus .field--converter .field-input {
   background-color: #fff;
   border-color: #f2f2f2;
}

/* Поле выбора порядка расчёта */
.calculator-v4 .calculator-profit__field--calc-mode .select {
   width: 100%;
}

.calculator-v4 .calc-mode .select__current-content {
   background-color: #f2f2f2;
   font-weight: 600;
   color: #0b0d13;
   border: 2px solid #f2f2f2;
   box-sizing: border-box;
   transition: background-color .3s, border-color .3s;
}

.calculator-v4 .calc-mode .select__current-content:hover,
.calculator-v4 .calc-mode.select:hover .select__current-content {
   background-color: #fff;
   border-color: #f2f2f2;
}

.calculator-v4 .calc-mode .select__content {
   width: 100%;
}

.calculator-v4 .calc-mode .select__item {
   white-space: normal;
}

/* Крупный результат с кнопками изменения срока */
.calculator-v4 .profit__profit.old {
   display: none;
}

.calculator-v4 .profit__profit.new {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.calculator-v4 .profit__step {
   -webkit-appearance: none;
   appearance: none;
   display: flex;
   align-items: center;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   transition: .25s;
}

.calculator-v4 .profit__step:disabled {
   cursor: default;
}

.calculator-v4 .profit__step:disabled,
.calculator-v4 .profit__step:hover {
   filter: brightness(.5);
}

.calculator-v4 .profit .profit__action {
   margin-top: 35px;
}

.calculator-v4 .profit__body .calculator-profit__footer .calculator-profit__disclaimer {
   font-size: 13px;
   line-height: 1.3;
   color: rgba(255, 255, 255, .4);
   text-align: left;
   margin-top: 35px;
}

@media screen and (max-width: 767px) {
   .calculator-v4 .calculator-profit__field-select .period-selector .select__current-content {
      width: 114px;
      height: 51px;
      margin-left: 2px;
   }

   .calculator-v4 .period-selector .field--converter .field-input {
      padding-left: 20px;
   }
}

@media screen and (min-width: 1024px) {
   .calculator-v4 .profit__profit.h1.new span {
      font-size: 48px;
   }
}