@import '../helpers/helpers';

.fi {
  .ti__cost {
    &_cards {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    &_removal {
      margin-bottom: 0;

      &-msg {
        color: $green;
        font-size: 1.125rem;
        font-weight: bold;
        margin-bottom: 0;
      }

      &-sum {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
      }

      &-product {
        max-width: 100%;
        font-size: 1rem;
      }

      &-price {
        padding-left: 5px;
        font-size: 1.125rem;
        font-weight: bold;
        padding-right: 20px;
      }

      &-remove {
        font-size: 1rem;
        text-decoration: none;
        white-space: nowrap;
      }

      .ti__cost_removal-row {
        display: none;
      }

      &-calc {
        .ti__cost_removal {
          &-row {
            display: flex;
          }

          &-input {
            width: 60px;
          }
        }
      }

      &-leveling,
      &-complements,
      &-added {
        display: none;
        margin-top: 15px;

        & .ti__cost_removal-title {
          &::before {
            display: none;
          }
        }
      }

      &-add {
        .ti__cost_removal-added {
          display: block;
        }
      }

      &-yes {
        .ti__cost_removal-leveling,
        .ti__cost_removal-complements {
          display: block;
        }
      }

      &_second {
        display: none;
        margin: 15px 0;

        .ti__cost_removal-title {
          &::before {
            display: none;
          }
        }
      }
    }

    &-trimming {
      & .ti__cost_removal_second {
        display: block;
      }
    }

    &_options {
      margin-top: 10px;

      &-list {
        margin-top: 5px;
      }
    }

    &_removal,
    &_options {
      &-title {
        display: block;
      }

      & .notification {
        margin-top: 5px;
        margin-bottom: 0;
        padding: 8px 25px 8px 15px;
        line-height: 22px;
      }

      &-radio label {
        display: block;
        padding: 0 35px;
      }
    }

    &_options-what {
      margin-top: 5px;
      line-height: inherit;

      &.collapsed .icon {
        position: relative;
        transform: rotate(180deg);
      }
    }
  }

  &__step3 {
    &-choose {
      @include make-col(12);
      order: 2;

      .ti__cost {
        &_options {
          &-list {
            & label {
              margin: 7px 0;
            }
          }

          &-add {
            margin-left: 30px;

            & label {
              margin-right: 30px;
            }
          }

          &-text {
            margin-bottom: 0;
          }

        }
      }

      & .choose {
        background: $white;
        padding-bottom: 0;
        padding-top: 20px;

        &__add {
          flex-direction: column;

          & .ti__phone {
            align-self: center;
            margin-bottom: 5px;
          }
        }
      }

      & .ti__next3 {
        margin-top: 20px;

        & .btn {
          width: 340px;
        }
      }
    }

    &-sum {
      @include make-col(12);
      order: 1;

      & .ti__overview-price {
        &_floor-only {
          display: none;
        }

        &_only {
          .ti__overview-price {
            &-estim,
            &_shortcut {
              display: none;
            }

            &_floor-only {
              display: block;
            }
          }
        }
      }
    }

    &-new {
      order: 3;
      background: $gray-bg;

      & .ti__new-link {
        padding: 5px 0 15px;
      }
    }
  }

  .ti__choose_first {
    & .ti__cost_options-add {
      display: none;
    }

    & .form-details {
      display: none;

      &__info {
        font-weight: 700;
      }

      .form-row {
        padding: 0;

        &__error {
          display: none;
        }
      }

      .warning-required {
        margin: 10px 0;
      }
    }
  }

  .ti__choose_first-purch {
    & .ti__cost_options-first {
      display: block;
    }
  }

  .ti__choose_first-only {
    & .ti__cost_options-second {
      display: block;
    }
  }

  .form-details_open {
    & .form-details {
      display: block;
    }
  }
}

@include media-breakpoint-up(md) {
  .fi {
    .ti__cost {
      &_options {
        margin-top: 15px;

        &-list {
          display: inline-block;
          margin-top: 0;
        }
      }

      &_cards {
        width: 100%;
        flex-direction: row;
      }

      &_removal,
      &_options {
        &-title {
          display: flex;
        }
      }

      &_options-what {
        margin-top: 0;
        padding-left: 10px;
      }

      &_options-radio {
        & label {
          display: inline-block;
        }
      }
    }

    &__step3 {
      &-choose {
        .ti__cost {
          &_options {
            &-add {
              margin-left: 60px;

              & label {
                margin-right: 60px;
              }
            }

          }
        }
      }

      &-sum {
        & .ti__overview-price {
          @include make-col(12);

          &-price_area {
            &::after {
              content: '';
              display: block;
              position: absolute;
              bottom: 0;
              left: 20px;
              width: calc(100% - 40px);
              border-bottom: 1px solid $gray;
            }
          }
        }
      }
    }
  }
}

@include media-breakpoint-only(md) {
  .fi {
    .ti__overview-price {
      &_floor,
      &_access {
        &-item {
          width: 100%;
        }

        &-spec {
          @include make-col(9);
        }

        &-rest {
          @include make-col(3);
        }
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .fi {
    .ti__cost {
      &_cards {
        width: 60%;
      }

      &_removal {
        &-sum {
          flex-direction: row;
        }

        &-product {
          max-width: 75%;
        }
      }
    }

    &__step3 {
      &-choose {
        @include make-col(7);
        order: 1;
      }

      &-sum {
        @include make-col(5);
        order: 2;
      }
    }

    .ti__overview-price {
      &-estim {
        & .ti__overview-price_total {
          height: auto;

          &-rest {
            text-align: right;
          }

          &-value {
            line-height: 1;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  .fi {
    .ti__cost {
      &_cards {
        width: 55%;
      }
    }
  }
}