@mixin embed-text{
  font-size: 14px;
  color: $color-blue;
}
@mixin embed-label{
  @include embed-text;
  font-weight: 600;
}

.bnbservice--rf-embeddable{

  @include embed-text;
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;

  &.bnbservice--request-user-form-wrapper{
    flex-direction: column;
    width: 384px;
  }

  .rf--form-wrapper{

    @include text;
    @include border;
    border-radius: 3px;
    border-color: #0033A0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.05);
    width: 384px;
    justify-content: space-around;

    &.summary-shown{

    }

    .rf--form{

      .rf--form-heading {

      }

      .rf--form-content{

        .rf--basic-info{

        }

        .divider{

        }

        .rf--form-elements{

          .rf--body{

            form{

              .rf--form-inner{

                ._heading-wrapper{
                  color: $color-blue;
                  border-radius: 3px 3px 0 0;
                  background-color: $color-light-blue-gray;
                  box-shadow: 0 3px 2px 0 rgba(0,0,0,0.03);
                  padding: $gutter;

                  h2{
                    font-size: 20px;
                    line-height: 24px;
                    text-align: center;
                    margin: 0;
                  }
                }

                .rf--summary{
                  background-color: #FBFCFF;
                  padding: $gutter $gutter * 2;

                  &>*{
                    margin: $gutter/2 0;
                  }

                  h4{
                    @include embed-label;
                    margin: 0;
                  }

                  h5{
                    font-size: 14px;
                    line-height: 16px;
                    font-weight: 300;
                    color: #6F7F9F;
                    margin: 0;
                  }

                  .subscription-pricing, .fe--total-price-wrapper{
                    display: flex;
                    justify-content: space-between;
                    margin: $gutter/2 0;
                  }

                  .fe--base-price-value, .fe--total-price-value{
                    @include embed-label;
                    font-size: 16px;
                    font-weight: normal;
                  }

                  .fe--total-price-wrapper{
                    border-top: 1px solid #EBF3F9;
                    padding: {
                      top: $gutter;
                    }
                    margin: {
                      top: $gutter;
                    }

                    .fe--total-price-label h5{
                      color: $color-blue;
                      padding: $gutter/2 0;
                    }

                    .fe--total-price-value {
                      padding: $gutter/2 $gutter;
                      -webkit-border-radius: $gutter;
                      -moz-border-radius: $gutter;
                      border-radius: $gutter;
                      background-color: rgba(76, 130, 252, 0.1);
                    }
                  }

                }

                ._content_wrapper{
                  padding: $gutter * 2;

                }

                &._step-0{

                }

                &._step-1{

                  ._content_wrapper {
                    padding: $gutter $gutter*2;
                  }
                }

              }

              .form-group{

                label{
                  @include embed-label;
                  text-transform: none;
                }

                .form-input-flex{
                  display: flex;
                  flex-direction: column;

                  input {
                    font-size: 14px;
                    color: $color-blue;
                    height: $gutter * 2;
                    margin: {
                      top: $gutter / 2;
                      bottom: $gutter;
                    };
                    padding: {
                      left: $gutter;
                      right: $gutter;
                    }

                    &.form-control {

                      &.has-error {
                        margin: {
                          bottom: 0;
                        }
                        border-color: $color-error;

                      }

                    }
                  }

                  .form-error{
                    margin: {
                      bottom: $gutter / 2;
                    }
                  }

                }

              }

              button{

                &.buttons{
                  font-size: 14px;
                  font-weight: 600;
                  padding: 10px $gutter * 2;
                  background: $color-blue;
                }

                &._text{
                  font-weight: normal;
                  color: $color-blue !important;
                  position: absolute;
                  left: 0;
                  font-size: 0.9em;
                }

              }

            }

          }

        }

      }

    }

  }

  .form-group-flex .form-error {
    flex-basis: 100%;
    line-height: 29px;
    display: block;
    background: #ff2e2e;
    color: white;
    padding: 0 10px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  .button-wrapper{

    .buttons{

      &._next{
        margin-top: $gutter;
      }

    }

  }

  #card-element{
    padding: $gutter 0 $gutter*4;

    h5{
      margin: $gutter/2 0;
      @include embed-label;
    }

    .StripeElement{
      @include border;
      padding: $gutter/3 $gutter/2;
      box-shadow: none;

      & > *{
        color: #9B9B9B;
      }

      .ElementsApp{

        .InputElement{
          color: black;
        }
      }
    }

  }
}

.bnbservice-logo-footer{
  font-family: "Open Sans", "Arial";
  font-size: 10px;
  text-align: right;
  color: $color-gray;
  padding: $gutter/2 0;
}