// Checkout
.checkout-progress-bar {
  display: block;
  margin: 0 0 3rem;
  font-size: 0;
  line-height: 1.4;
  counter-reset: i;

  li {
    display: inline-block;
    position: relative;
    width: 50%;
    margin: 0;
    text-align: center;
    vertical-align: top;

    &::before {
      position: absolute;
      top: 1.9rem;
      left: 0;
      width: 100%;
      height: .7rem;
      transition: background .3s;
      background-color: #e4e4e4;
      content: '';
    }

    > span {
      display: inline-block;
      width: 100%;
      padding-top: 4.5rem;
      color: #ccc;
      font-size: 1.6rem;
      font-weight: 300;
      word-wrap: break-word;

      &::before,
      &::after {
        position: absolute;
        top: 0;
        left: 50%;
        transition: background .3s;
        border-radius: 50%;
        content: '';
      }

      &::before {
        width: 3.8rem;
        height: 3.8rem;
        margin-left: -1.9rem;
        background-color: #e4e4e4;
      }

      &::after {
        top: .6rem;
        width: 2.6rem;
        height: 2.6rem;
        margin-left: -1.3rem;
        background: #fff;
        color: #777;
        font-weight: 600;
        content: counter(i);
        counter-increment: i;
      }
    }

    &.active {
      &::before,
      > span::before {
        background-color: #ff5501;
      }

      > span {
        color: #000;
      }

      > span::after {
        font-family: 'porto';
        content: '\e84e';
      }
    }

    &:first-child {
      &::before {
        border-radius: .6rem 0 0 .6rem;
      }
    }

    &:last-child {
      &::before {
        border-radius: 0 .6rem .6rem 0;
      }
    }
  }
}

.checkout-steps {
  li {
    margin-bottom: 3rem;

    form {
      max-width: 480px;
      margin-top: 3rem;
      margin-bottom: 0;
      padding-bottom: 2rem;
      border-bottom: 1px solid #ccc;

      &:last-of-type {
        padding-bottom: .1rem;
        border-bottom: 0;
      }

      p {
        margin-bottom: 1rem;
        color: #777;
        font-size: 1.3rem;
      }
    }

    .form-footer {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
  }
}

.step-title {
  padding-bottom: 9px;
    font-weight: 400;
    font-size: 2.1rem;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 0;
    @include clearfix;

  .step-title-edit {
    margin-top: .4rem;
    float: right;
    font-size: 1.4rem;
  }
}

.shipping-step-addresses {
  @include clearfix;
  margin-bottom: 2rem;
  font-size: 0;
}

.shipping-address-box {
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 240px;
  margin: 0;
  padding: 1.8rem 3.2rem 1rem 1.8rem;
  transition: .3s border-color;
  border: .2rem solid transparent;
  font-size: 1.3rem;
  line-height: 3rem;
  vertical-align: top;
  word-wrap: break-word;

    &.active {
    border-color: #ff5501;

    &::after {
      content: '\e84e';
      font-family: 'porto';
        position: absolute;
        right: 0;
        top: 0;
        height: 2.7rem;
        width: 2.7rem;
        font-size: 1.9rem;
        line-height: 2.1rem;
        padding-top: .2rem;
        text-align: center;
      background-color: #ff5501;
        color: #ffffff;
    }

    .address-box-action {
      visibility: hidden;
    }
    }
}

.address-box-action {
  margin-top: 2rem;
  .btn {
    font-family: $font-family;
    letter-spacing: 0;
    text-transform: initial;

    &.btn-sm {
      padding: .85rem 1.2rem;
      font-size: 1.3rem;

      &.btn-link {
        padding-right: 0;
        padding-left: 0;
      }
    }
  }
}

.btn-new-address {
  margin-bottom: 1.2rem;
  padding: .95rem 1.3rem;
  font-family: $font-family;
  letter-spacing: 0;
  text-transform: initial;
}

.table-step-shipping {
  max-width: 600px;

  tr {
    td {
      border: 0;
         border-bottom: 1px solid #cccccc;
         padding: 1.8rem 1.5rem;
    }
  }
}

.checkout-steps-action {
  @include clearfix;

  .btn {
    min-width: 70px;
    text-align: center;
  }
}

.order-summary {
  margin-top: 3.3rem;
    padding:2.2rem 2.7rem;
  background: #f5f5f5;
    border: 1px solid #ddd;
    margin-bottom: 3rem;

    h3 {
      font-weight: 400;
    font-size: 2.3rem;
    margin-bottom: 1.3rem;
    }

    h4 {
      font-size: 1.5rem;
    font-weight: 600;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 0;

      a {
        position: relative;
        display: block;
        color: inherit;
        padding: 1rem 2rem 1rem 0;


        &::after {
        font-family: 'porto';
          content: '\e81b';
          position: absolute;
          display: inline-block;
          right: .4rem;
          top: 50%;
          font-weight: 400;
          font-size: 1.5rem;
          transform: translateY(-50%);
        }

        &.collapsed::after {
          content: '\e81c';
        }
      }
    }
}

.table-mini-cart {
  margin-bottom: 0;
  tr {
    td {
      padding: 2rem 0;
      border: 0;
      border-bottom: 1px solid #ccc;
      vertical-align: top;
    }
  }

  .product-col {
    -ms-flex-align: start;
    align-items: flex-start;

    .product-image-container {
      flex: 0 0 75px;
      max-width: 75px;
      margin-right: 1.5rem;
      vertical-align: top;
    }

    > div {
      padding-top: .8rem;
      vertical-align: top;
    }
  }

  .price-col {
    padding-top: 2.5rem;
    font-size: 1.6rem;
    font-weight: 400;
  }

  .product-title {
    display: block;
    max-width: 170px;
    margin-bottom: .8rem;
    font-size: 1.4rem;
    font-weight: 600;
  }

  .product-qty {
    display: block;
    color: #777;
    font-size: 1.3rem;
  }
}

.checkout-payment {
  margin-bottom: 3rem;

  .step-title {
    margin-bottom: 1.8rem;
  }

  h4 {
    font-weight: 400;
  }

  .form-group {
    max-width: 480px;
  }
}

#checkout-shipping-address {
  display: none;
  padding-left: 3rem;
  line-height: 3rem;

  &.show {
    display: block;
  }
}

#new-checkout-address {
  display: none;

  &.show {
    display: block;
  }
}

.checkout-discount {
  margin-top: 2rem;
  margin-bottom: 3rem;

  form {
    max-width: 480px;
    margin-bottom: 0;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }

  h4 {
      margin-bottom: 0;
    border-top: 1px solid #ccc;
    font-size: 1.4rem;
    font-weight: 400;

      a {
        position: relative;
        display: block;
        padding: 1rem 2rem 1rem 0;


        &::after {
        font-family: 'porto';
          content: '\e81b';
          position: absolute;
          display: inline-block;
          right: .4rem;
          top: 50%;
          font-size: 1.5rem;
          transform: translateY(-50%);
        }

        &.collapsed::after {
          content: '\e81c';
        }
      }
    }
}

.checkout-info-box {
  margin-bottom: 3rem;
  font-size: 1.3rem;
  line-height: 2.7rem;

  .step-title {
    margin-bottom: 1.8rem;
  }

  address {
  }
}

@include mq('sm') {
  .checkout-progress-bar {
    li {
      width: 185px;

      > span {
        font-size: 1.8rem;
      }
    }
  }

  .shipping-address-box {
      width: 50%;
  }
}

@include mq('md') {
  .shipping-address-box {
      width: 33.33%;
  }
}