@import "../../app/variables";
.learts-mb-30 {
  margin-bottom: 30px;
}
.payment-method {
  margin-bottom: 30px;
  .card {
    padding: 20px;
    border-width: 1px 0 0;
    border-color:$shadow-darker;
    border-radius: 0 !important;

    .card-header {
      padding: 0;
      border: 0;
      background-color: rgba(0, 0, 0, 0);

      button {
        font-size: 1.375rem;
        font-weight: 500;
        line-height: 1.675;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        padding-left: 22px;
        border: 0;
        background-color: rgba(0, 0, 0, 0);

        &::before {
          position: absolute;
          top: 50%;
          left: 0;
          width: 17px;
          height: 17px;
          margin-top: 2px;
          content: "";
          transform: translateY(-50%);
          border: 1px solid $primary-coral;
          border-radius: 50%;
        }

        &::after {
          position: absolute;
          top: 50%;
          left: 3px;
          width: 11px;
          height: 11px;
          margin-top: 2px;
          content: "";
          transition: all .5s ease 0s;
          transform: translateY(-50%);
          opacity: 0;
          border-radius: 50%;
          background-color: $primary-coral;

        }

        &:focus {
          &::after {
            opacity: 1;
          }
        }
      }

    }

    .card-body {
      position: relative;
      margin-top: 12px;
      padding: 10px 15px;
      background-color: $pure-white;
      -webkit-box-shadow: 0 0 10px $shadow-light;
      box-shadow: 0 0 10px $shadow-light;

      p {
        font-size: 1rem;
        font-weight: 500;
        line-height: 2;
        color: $text-gray;
      }
    }
  }
}