/*******************

payment styles

**********************/

.payment-wrapper {
  max-width: 600px;
  margin: 0 auto;
  padding: 50px 30px;
  position: relative;
}

.payment-wrapper .link-wrapper {
  text-align: center;
}

.coupon-apply-form .form-actions button,
.payment-wrapper .link-wrapper .btn {
  font-size: 14px;
  color: #ffffff;
  background: var(--brd-cl1);
  border: 1px solid var(--brd-cl1);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 30px;
  font-family: var(--primary-font);
  /*border: 1px solid transparent;*/
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  text-transform: uppercase;
  margin-top: 5px;
  min-width: 100px;
  margin-right: 0px;
}

.coupon-apply-form .form-actions button:hover,
.payment-wrapper .link-wrapper .btn:hover {
  background: #ffffff;
  color: var(--brd-cl1);
}

/********* payment process*********/

.payment-page h2 {
  font-size: 34px;
  color: #000000;
  font-family: var(--primary-font);
  font-weight: 300;
  text-align: center;
  margin: 0;
  position: relative;
}

.payment-page h2:after {
  content: "";
  width: 75px;
  height: 1px;
  background: #000000;
  margin: 18px auto 40px;
  display: block;
}

/******* payment complete********/

.payment-page h4,
.payment-complete-page h4 {
  color: #666666;
  font-size: 18px;
  line-height: 24px;
  font-family: var(--primary-font);
  font-weight: 300;
}

.payment-complete-page h4 {
  text-align: center;
  padding-top: 50px;
  background: url(../images/payment/payment_successfully.png) no-repeat center top transparent;
}

/********* coupon-apply-form************/

.coupon-apply-form {
  margin-bottom: 20px;
}

.coupon-apply-form form {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 30px 50px 30px;
}

.coupon-apply-form form>.payment-wrapper .js-form-item {
  margin: 0;
}

.coupon-apply-form .form-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
}

.coupon-apply-form .payment-wrapper {
  padding: 0 120px 0 0;
  max-width: none;
}

.coupon-apply-form .form-actions button {
  margin: 0;
}

.coupon-apply-form .js-form-item .control-label {
  font-family: var(--primary-font);
  font-weight: 400;
}

/***********responsive*****************/

@media screen and (max-width: 767px) {
  .payment-page h2 {
    font-size: 20px;
  }

  .payment-wrapper {
    padding: 20px 30px;
  }
}

@media screen and (max-width: 480px) {
  .coupon-apply-form .payment-wrapper {
    padding: 0;
  }

  .coupon-apply-form .form-actions {
    position: static;
    margin-top: 15px;
  }
}