@import '~@od/global-resources/scss/settings/index';
@import '~@od/global-resources/scss/components/modals';
@import '~@od/global-resources/scss/components/spinner';
@import '~@od/global-resources/scss/helpers/index';
@import '~@od/global-resources/scss/base/index';

.account-rewards {
  border: 1px solid $gray-medium;
  @include padding(10px);
  @include font-size(13px);

  &-info, &-logo-section {
    display: flex;
    flex-direction: row;
  }

  &-separator {
    border-left: 1px solid $gray-light;
    @include margin(13px 0 0 20px);
    height: 30px;
  }

  &-user-info {
    width: 28%;
    height: 372px;
    border: 1px solid $gray-medium;
    border-radius: 5px;
    @include padding(10px);
    position: relative;

    .edit-birthday {
      margin-left: 92px;
    }
  }

  &-column2 {
    @include margin(0 15px);
  }

  &-column2, &-column3 {
    width: 34%;
  }

  .depot-dollars-section, .rewards-section {
    height: 310px;
    border: 1px solid $gray-medium;
    border-radius: 5px;
    @include padding(10px);
  }

  .depot-dollars-section {
    .show-depot-dollars {
      @include margin(95px 0 0)
    }

    .show-join-bs-content {
      @include padding(30px)
    }
  }

  .total-rewards-balance, .depot-dollars-balance {
    @include font-size(40px);
    font-weight: $font-weight-light;
  }

  .bs-learn-more, .shop-now-button {
    opacity: 0;
  }

  .loyalty-phone {
    margin-right: 30px;
  }

  .helpful-links {
    ul li {
      padding-bottom: 4px
    }
  }

  .user-without-depot-dollars, .user-with-depot-dollars{
    @include margin(18px 20px);
  }
  &-no-rewards {
    display: flex;
    border: 1px solid $gray-medium;
    @include padding(10px);
    @include font-size(14px);

    .join-rewards-section,
    .join-bs2-section {
      @include padding(24px);
      font-weight:600;
      width: 49%;
      border: 1px solid $gray-medium;
      .join-copy {
        min-height:50px;
      }
    }
    .account-rewards-column2 {
      @include margin(0 0 0 15px);
    }
  }
}

.modal-overlay {
  .rewards-modal {
    margin-top: 30%;
    height: 110px;
    @include font-size(14px);

    .contact-us-title {
      text-align: left;
      margin-bottom: 10px;
      color: $gray;
    }

    .contact-us-message {
      @include padding(20px 0 0 20px);
    }
  }
}

#accountSummary {
  #phoneTooltip {
    left: 170px;
    top: 85px;
  }
}

#showActiveLoyaltyNo li {
  line-height: 1.7;
  margin-bottom: 6px
}