
/* Checkout pages styling (Bootstrap 3 friendly) */
.checkout-wrap{
  max-width: 820px;
  margin: 0 auto;
}
.checkout-card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:4px;
  padding:0;
  margin: 20px auto 0;
}
.checkout-top-time{
  text-align:center;
  padding: 10px 0 6px;
  font-size: 22px;
  color:#222;
  font-weight:600;
  border-bottom:1px solid #e5e5e5;
}
.steps-bar{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  border-bottom:1px solid #e5e5e5;
}
.steps-bar li{
  flex:1;
  position:relative;
  text-align:center;
  font-weight:700;
  text-transform:uppercase;
  font-size:18px;
  line-height:44px;
  height:44px;
  background: linear-gradient(#f5f5f5,#dcdcdc);
  color:#2f6b2f;
  border-right:1px solid #d0d0d0;
}
.steps-bar li:last-child{border-right:none;}
.steps-bar li.is-active{
  background: linear-gradient(#3f9a3f,#2f7f2f);
  color:#fff;
}
.steps-bar li:after{
  content:"";
  position:absolute;
  top:0;
  right:-22px;
  width:0;height:0;
  border-top:22px solid transparent;
  border-bottom:22px solid transparent;
  border-left:22px solid #dcdcdc;
  z-index:2;
}
.steps-bar li:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:0;height:0;
  border-top:22px solid transparent;
  border-bottom:22px solid transparent;
  border-left:22px solid #fff;
  z-index:1;
}
.steps-bar li:first-child:before{display:none;}
.steps-bar li:last-child:after{display:none;}
.steps-bar li.is-active:after{
  border-left-color:#2f7f2f;
}

.order-row{
  padding: 10px 18px;
  border-bottom:1px solid #eaeaea;
  font-size:14px;
}
.order-row .price{
  float:right;
}
.order-row .old-price{
  text-decoration:line-through;
  color:#777;
  margin-right:18px;
}
.form-area{
  padding: 18px;
}
.form-line{
  margin: 12px 0;
  display:flex;
  align-items:center;
}
.form-line label{
  width:110px;
  font-weight:700;
  margin:0;
}
.form-line input{
  flex:1;
  height: 34px;
  border:1px solid #ccc;
  border-radius:3px;
  padding: 6px 10px;
}
.action-btn{
  margin: 18px 0 8px;
}
.action-btn .btn{
  width:100%;
  font-size:20px;
  padding: 12px 0;
  border-radius:4px;
  background:#5cb85c;
  border-color:#4cae4c;
}
.action-btn .btn:hover{background:#4cae4c;}
.badges{
  padding: 16px 18px 22px;
  display:flex;
  justify-content:space-around;
  gap:10px;
}
.badge-item{
  text-align:center;
  color:#333;
  font-weight:700;
  font-size:12px;
}
.badge-icon{
  width:54px;height:54px;
  border-radius:50%;
  border:3px solid #333;
  margin:0 auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
}
.badge-item small{display:block;font-weight:700;letter-spacing:.2px;}
.footer-note{
  border-top:1px solid #e5e5e5;
  padding: 10px 18px;
  font-size:12px;
  color:#444;
}
.security-icons img {
    width: 80%;
    max-width: 300px;
    display: block;
    margin: 20px auto;
}
