.footer-inner {
  $footer-inner: &;

  position: relative;

  &__wrap {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    background: #11151a;
  }
  &__row {
    width: 100%;
    display: flex;
    &--first {
      margin-bottom: 55px;
      @include mobile {
        margin-bottom: 20px;
        flex-wrap: wrap;
      }
    }
  }
  &__info {
    width: 50%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    @include mobile {
      width: 100%;
    }
  }
  &__logo {
    width: 130px;
    min-width: 130px;
    height: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 130px;
      min-width: 130px;
      height: 30px;
    }
  }
  &__mail-contacts {
    width: 100%;
    margin-bottom: 25px;
    p {
      margin-bottom: 5px;
      font-family: "Roboto-Light";
      font-style: normal;
      font-size: 14px;
      line-height: calc(20 / 14);
      color: #ffffff;
    }
    a {
      font-family: "Roboto-Medium";
      font-style: normal;
      font-size: 14px;
      line-height: calc(20 / 14);
      color: #46ca43 !important;
    }
  }
  &__socials-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    @include mobile {
      margin-bottom: 30px;
      justify-content: space-between;
    }
  }
  &__social-link {
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: 0.1s;
    cursor: pointer;
    &:hover {
      #{$footer-inner}__social-link-icon {
        img {
          &.nohov {
            opacity: 0;
          }
          &.hov {
            opacity: 1;
          }
        }
      }
    }
    &:not(:last-child) {
      margin-right: 35px;
      @include tablet-maxi {
        margin-right: 15px;
      }
    }
    &::before {
      display: none;
    }

    #{$footer-inner}__social-link-icon {
      position: relative;
      width: 32px;
      min-width: 32px;
      height: 32px;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 32px;
        min-width: 32px;
        height: 32px;
        transition: 0.3s;
        &.nohov {
          opacity: 1;
        }
        &.hov {
          opacity: 0;
        }
      }
    }
  }

  &__menu-wrap {
    width: 100%;
    max-width: 200px;
    padding-right: 30px;
    display: flex;
    flex-direction: column;
    @include mobile {
      width: 50%;
      max-width: 50%;
      padding-right: 0;
      margin-bottom: 30px;
    }
  }
  &__menu-title {
    margin-bottom: 30px;
    font-family: "Roboto-Bold";
    font-style: normal;
    font-size: 16px;
    line-height: calc(24 / 16);
    text-transform: uppercase;
    color: #ffffff;
  }
  &__menu-list {
    width: 100%;
    li {
      width: 100%;
      &:not(:last-child) {
        margin-bottom: 20px;
      }
      a {
        font-family: "Roboto-Light";
        font-style: normal;
        font-size: 14px;
        line-height: calc(20 / 14);
        color: #ffffff;
        transition: 0.3s;
        &:hover {
          color: $c-accent;
        }
      }
    }
  }
  &__region-block {
    width: 100%;
    margin-bottom: 50px;
  }
  &__region-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-family: "Roboto";
    font-style: normal;
    font-size: 14px;
    line-height: calc(24 / 14);
    letter-spacing: 0.261482px;
    color: #ffffff;
    .step-info {
      position: relative;
      width: 15px;
      min-width: 15px;
      height: 15px;
      margin-left: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .step-info-msg{
      width: auto;
      min-width: 300px;
      max-width: 300px;
      left: -5px !important;
      @include mobile{
        min-width: 200px;
        max-width: 200px;
      }
    }
  }
  &__region-list {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    @include tablet-maxi {
      margin-bottom: 40px;
      justify-content: center;
    }
    @include mobile {
      margin-bottom: 20px;
      justify-content: space-between;
    }
  }
  &__region-item {
    width: 100%;
    max-width: 145px;
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #212937;
    border-radius: 4px;
    text-align: center;
    font-family: "Roboto-Light";
    font-style: normal;
    font-size: 14px;
    line-height: calc(20 / 14);
    color: #f6f6f6;
    cursor: pointer;
    transition: 0.3s;
    @include tablet-maxi {
      margin-left: 7.5px;
      margin-right: 7.5px;
      margin-bottom: 10px;
    }
    @include mobile {
      width: calc(50% - 7px);
      max-width: calc(50% - 7px);
      margin-left: 0;
      margin-right: 0;
    }
    &:hover {
      background: #37475f;
    }
    &.active {
      background: #37475f;
      font-family: "Roboto-Regular";
    }
    &:last-child{
      @include mobile{
        width: 100%;
        max-width: 100%;
      }
    }
  }

  &__text {
    width: 100%;
    font-family: "Roboto-Light";
    font-style: normal;
    font-size: 14px;
    line-height: calc(20 / 14);
    color: #ffffff;
    opacity: 0.7;
    &--bold {
      font-family: "Roboto-Bold";
    }
    &--white {
      opacity: 1;
    }
    &--sm {
      font-size: 12px;
      line-height: calc(14 / 12);
    }
  }
  &__decor-line {
    width: 100%;
    height: 1px;
    margin-bottom: 20px;
    background: #9ba1ab;
  }
  &__company-info {
    max-width: 350px;
    margin-bottom: 15px;
  }
  &__company-copyright {
    margin-bottom: 15px;
  }
  &__payment-logos {
    width: 100%;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    @include tablet-maxi {
      margin-top: 40px;
      justify-content: center;
    }
    @include mobile {
      width: calc(100% + 16px);
      margin-left: -9px;
    }
    img {
      width: 65px;
      min-width: 65px;
      height: 40px;
      @include tablet-maxi {
        margin-bottom: 15px;
        margin-left: 7.5px;
        margin-right: 7.5px;
      }
      @include mobile {
        margin-bottom: 11px;
        margin-left: 7px;
        margin-right: 7px;
      }
      @include mobile-micro{
        width: 54px;
        min-width: 54px;
        height: 32px;
      }
    }
  }
  &__paydo-logo {
    width: 100%;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    @include mobile {
      justify-content: flex-start;
    }
    img {
      margin-right: 20px;
      margin-left: 20px;
    }
    p {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: calc(14 / 12);
      color: #ffffff;
      @include mobile{
        text-align: center;
      }
    }
  }
}