.price {
  display: flex;
  flex-direction: column;
  gap: 4px;

  &__main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 4px;
  }

  &__item {
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 2.25rem;
    color: $blue-dark;
  }

  &__monthly {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
  }

  &__was-block {
    color: $warm-grey;
    font-weight: 500;
    line-height: normal;
    text-decoration: line-through;
  }

  &__tooltip {
    width: 16px;
    color: $warm-grey;
    cursor: pointer;

    & svg {
      height: 20px;
    }

    & svg[data-prefix='far'] {
      display: none;
    }

    & svg[data-prefix='fas'] {
      display: inline-block;
    }

    &:hover svg[data-prefix='far'] {
      display: inline-block;
      color: $blue-dark;
    }

    &:hover svg[data-prefix='fas'] {
      display: none;
    }
  }

  &__additional-text {
    color: $squant;
    font-size: .75rem;
    line-height: 1rem; 
  }

  &--offer {
    .price__item {
      color: $red;
    }
  }

  &--small {
    .price__item {
      font-size: 1.5rem;
      line-height: 1.5rem;
    }
  }
}

.price-tooltip {
  & .tooltip-inner {
    color: $gray-dark;
    background-color: $white;
    padding: 8px 12px !important;
    box-shadow: 0 0 8px 0 $black-transparent12;
  }

  &.bs-tooltip-top .arrow::before {
    border-top-color: $white;
  }

  &.bs-tooltip-bottom .arrow::before {
    border-bottom-color: $white;
  }

  p {
    margin-bottom: 0;
  }
}