@use '../../utils' as *;

.pricing-action {
  margin-left: 69px;
  margin-right: 91px;
  @include border-radius(50px);
  background-color: var(--rr-theme-secondary);

  @media #{$md} {
    margin-left: 50px;
    margin-right: 50px;
  }
  @media #{$sm, $xs} {
    margin-left: 0;
    margin-right: 0;
  }

  &__space {
    padding-top: 120px;
    padding-bottom: 343px;
    @media #{$md} {
      padding-top: 80px;
    }
    @media #{$sm,$xs} {
      padding-top: 70px;
    }
  }

  &__content {
    max-width: 593px;
    margin-left: auto;
    margin-right: auto;
  }

  &__item {
    &:not(:last-child) {
      margin-bottom: 30px;
    }

    &-content {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 27px 27px 31px;
      justify-content: space-between;
      @include border-radius(20px);
      border: 1px solid rgba(7, 28, 60, 0.2);

      @media #{$md, $sm} {
        column-count: 2;
        display: inherit;
      }
      @media #{$xs} {
        column-count: 1;
        display: inherit;
      }

      &__title {
        min-width: 190px;
        @media #{$xs} {
          margin-bottom: 10px;
        }
      }

      &__list {
        min-width: 159px;
        @media #{$xs} {
          margin-bottom: 20px;
        }

        &.has-consult-plan {
          margin-left: 23px;

          @media #{$md, $sm, $xs} {
            margin-left: 0;
          }
        }

        ul {
          list-style: none;


          li {
            color: var(--rr-heading-primary);

            &:not(:last-child) {
              margin-bottom: 10px;
            }
            span {
              margin-right: 10px;
            }
          }
        }
      }

      &__price {
        min-width: 118px;

        @media #{$xs} {
          margin-bottom: 20px;
        }

        .amount {
          line-height: 55px;
          font-size:  var(--rr-fs-h2);
          color: var(--rr-heading-primary);

          &.has--amount {
            margin-left: 23px;

            @media #{$md, $sm, $xs} {
              margin-left: 0;
            }
          }

          span {
            font-size: var(--rr-fs-body);
            margin-left: -7px;
          }
        }
      }

      &__btn {
        .rr-btn {
          padding: 16.5px 29.5px;
          border: 1px solid #185EC8;
          background: transparent !important;
          font-weight: 600;

          .btn-wrap {
            span {
              color: var(--rr-color-900) !important;
            }
          }

          &:hover {
            background: var(--rr-theme-primary) !important;

            .btn-wrap {
              span {
                color: var(--rr-common-white) !important;
              }
            }
          }
        }
      }
    }
  }
}