.civi-payment-for {
  .civi-package-item {
    .civi-package-title {
      margin-bottom: 20px;
      .entry-title {
        margin-top: 0 !important;
      }
    }
    .civi-total-price {
      margin-top: 30px;
      padding-top: 30px;
      border-top: solid 1px $border_color;
      .old-price {
        text-decoration: line-through;
      }
      span {
        display: block;
        margin-bottom: 5px;
      }
      .price {
        display: block;
        font-size: 22px;
        font-weight: 600;
        color: $primary_color;
      }
      sup {
        font-size: 18px;
        top: 0;
      }
    }
    .civi-button {
      margin-top: 20px;
    }
  }
}
.payment-wrap {
  .entry-title {
    font-size: 24px;
    margin-top: 25px !important;
    margin-bottom: 30px;
  }
}
.civi-payment-method-wrap {
  .radio {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    border: solid 1px #d8d8d8;
    background-color: #fff;
    &.active {
      border-color: $accent_color;
      background: $accent_color;
      color: #fff;
      @include box-shadow(0 0 20px 0 rgba(0, 0, 0, 0.05));
    }
    + .radio {
      margin-top: 20px;
    }
    &.wire-transfer {
      label {
        padding: 29px 15px;
        i {
          margin-right: 10px;
        }
      }
    }
    label {
      display: block;
      padding: 15px;
      margin-bottom: 0;
      cursor: pointer;
    }
    img {
      width: 80px;
      height: 48px;
      object-fit: contain;
      margin-right: 10px;
    }
    input {
      display: none;
    }
  }
}
.payment-wrap .terms-conditions {
  margin-top: 20px;
  margin-bottom: 20px;
  strong {
    color: $accent_color;
  }
}

.civi-payment-completed-wrap {
  .inner-payment-completed {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    .panel-heading {
      margin-top: 25px;
      margin-bottom: 25px;
    }
    h3 {
      font-size: 24px;
      margin-bottom: 20px;
    }
  }
  .list-group {
    padding-left: 0;
    margin-bottom: 0;
    border: 1px solid $border_color;
    border-radius: 5px;
    li {
      @include d-flex();
      @include flex-wrap();
      @include align-items-center();
      @include justify-content-between();
      padding: 20px;
      strong {
        color: #2a2a2a;
        font-weight: 500;
      }
      + li {
        border-top: 1px solid $border_color;
      }
    }
  }
  .civi-button {
    display: inline-block;
    margin-top: 30px;
  }
  .card-info table {
    th,
    td {
      padding: 20px;
      font-weight: 400;
      color: #2d2d2d;
    }
  }
}

.civi-payment-completed-wrap {
  padding-top: 50px;
}

#civi_payment_package,
#civi_payment_candidate_package {
  &:hover {
    .civi-dual-ring:after {
      border-color: $accent_color transparent $accent_color;
    }
  }
  .civi-loading-effect {
    position: sticky;
    &:before {
      background-color: transparent;
    }
  }
  .civi-dual-ring {
    position: static;
    transform: none;
    width: 16px;
    height: 16px;
    &:after {
      height: 16px;
      border-width: 2px;
      margin-left: 8px;
      border-color: #fff transparent #fff;
      width: 16px;
    }
  }
}

//razorpay
#btn-razorpay,
#btn-razorpay-cancel {
  background-color: $accent_color;
  color: #fff;
  padding: 10px 26px;
  border: 1px solid $accent_color;
  border-radius: 3em;
  cursor: pointer;
}

#btn-razorpay[disabled="true"] {
  cursor: not-allowed;
}

.package-coupon {
  margin-top: 20px;
  input {
    flex: 0 0 30%;
    max-width: 30%;
  }
  form {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    &.loading {
      button[type="submit"] {
        pointer-events: none;
        cursor: not-allowed;
        color: transparent;
        transition: all 0.3s;
        &:before {
          content: "";
          width: 24px;
          height: 24px;
          border-width: 2px;
          border-color: #fff transparent #fff;
          border-style: solid;
          border-radius: 50%;
          border-left-color: transparent;
          border-right-color: transparent;
          animation: 1s linear 0s infinite normal none running spin;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -12px;
          margin-top: -12px;
        }
      }
    }
  }
  .package-coupon-result {
    &.error {
      color: red;
      margin-top: 10px;
    }
    &.success {
      color: green;
      margin-top: 10px;
    }
    &.warning {
      color: orange;
      margin-top: 10px;
    }
  }
}

@media only screen and (max-width: 575px) {
  .civi-package-wrap {
    margin-top: 40px;
  }
}

@media only screen and (max-width: 479px) {
  .civi-payment-completed-wrap .list-group li {
    padding: 20px;
  }
}
