/*
 * shop-cart-checkout.scss
 * -----------------------------------------------
*/

/**
 * Cart/checkout page
 */
.woocommerce {
  .woocommerce-cart-form {
    td.actions {
      padding: 10px;
    }
    .coupon {
      display: inline-block;
      @include media-breakpoint-down(lg) {
        display: block;
      }
      label {
        display: none;
      }
      .input-text {
        width: auto;
        display: inline-block;
        margin-right: 10px;
        border-radius: 5px;

        @include media-breakpoint-down(lg) {
          display: block;
          width: 100% !important;
          margin-right: 0;
        }
      }
      .button {
        @include media-breakpoint-down(lg) {
          display: block;
          width: 100% !important;
          margin-bottom: 15px;
        }
      }
    }
    button[type="submit"] {
      float: right;
      @include media-breakpoint-down(lg) {
        float: none;
        width: 100%;
      }
    }
  }
  .cart-empty {
    padding: 1.25rem 1.25rem;
  }
}

.woocommerce-cart,
.woocommerce-checkout,
#add_payment_method {
  table.cart {
    .product-thumbnail {
      min-width: 64px;
    }

    img {
      width: 64px;
      box-shadow: none;
    }

    th,
    td {
      vertical-align: middle;
    }
    .product-quantity {
      @include media-breakpoint-down(md) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .quantity {
          margin-right: 0;
        }
      }
    }
    .product-name {
      a {
        color: $headings-color;
      }
      .wc-item-meta .wc-item-meta-label, 
      .wc-item-meta dt, 
      dl.variation .wc-item-meta-label, 
      dl.variation dt {
        color: #444;
        font-size: 0.9rem;
        float: left;
        clear: both;
        margin-right: .25em;
        display: inline-block;
        list-style: none outside
      }
      .wc-item-meta dd, 
      dl.variation dd {
        font-size: 0.9rem;
        margin: 0
      }
      .wc-item-meta p, 
      .wc-item-meta:last-child, 
      dl.variation p, 
      dl.variation:last-child {
        margin-bottom: 0
      }
    }
  }
  table > thead > tr > th,
  table > tbody > tr > th,
  table > tfoot > tr > th {
    color: #444;
  }

  .woocommerce-cart-form+.cart-collaterals {
    margin-top: 75px;
  }

  .cart-collaterals {
    .shipping_calculator {
      .button {
        width: 100%;
        float: none;
        display: block;
      }

      .shipping-calculator-button {
        &::after {
          //@include iconafter( '\e019' );
        }
      }
    }

    .cart_totals {
      background-color: #fff;
      padding: 40px 50px;
      border-radius: 7px;
      width: 33.33%;
      float: right;
      @include box-shadow( 0px 10px 30px rgba(5, 5, 5, 0.08) );

      @include media-breakpoint-down(xl) {
        width: 100%;
        padding: 20px 25px;
      }
      h2 {
        font-size: $h4-font-size;
        font-weight: $headings-font-weight-h4;
        border-bottom: 1px solid $gray-eee;
        padding-bottom: 15px;
      }
      p {
        small {
        }
      }

      tr td,
      tr th {
        border: none;
        padding-left: 0;
      }
      td {
        text-align: right;
        padding-right: 0;
      }
      .cart-subtotal {
        th,td {
          font-weight: $body-font-weight;
          color: $text-color;
        }
      }
      .wc-proceed-to-checkout .button {
        width: 100%;
        text-align: center;
      }
    }

    .cross-sells {
      margin-top: 50px;
      .title {
        margin-bottom: 30px;
      }
      h2 {
        font-size: $h3-font-size;
        font-weight: $headings-font-weight-h3;
      }
      ul.products {
        li.product {
          margin-top: 0;
        }
      }
      .isotope-item {
        margin-bottom: 0;
      }
    }
  }
  .checkout {
    .col-2 {
      #ship-to-different-address {
        float: left;
        clear: none;
      }

      .notes {
        clear: left;
      }

      .form-row-first {
        clear: left;
      }
    }

    .create-account small {
      font-size: 11px;
      font-weight: normal;
    }

    div.shipping-address {
      padding: 0;
      clear: left;
      width: 100%;
    }

    .shipping_address {
      clear: both;
    }
  }

  #payment {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #dedede;

    ul.payment_methods {
      @include clearfix();
      text-align: left;
      padding: 25px;
      border-bottom: 1px solid darken( $gray-eee, 10% );
      margin: 0;
      list-style: none outside;

      li {
        line-height: 2;
        text-align: left;
        margin: 0;
        font-weight: normal;
        margin-bottom: 15px;

        input {
          margin: 0 1em 0 0;
        }

        img {
          vertical-align: middle;
          margin: -2px 0 0 0.5em;
          padding: 0;
          position: relative;
          box-shadow: none;
        }

        img + img {
          margin-left: 2px;
        }
      }

      li:not(.woocommerce-notice) {
        @include clearfix();
      }

      .woocommerce-notice {
        padding: 0;
        border: none;
        background: transparent;
        margin-bottom: 0;
      }
    }

    .place-order {
      padding: 25px;
      margin-bottom: 0;
    }

    div.payment_box {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      padding: 1em;
      margin: 1em 0;
      font-size: 0.92em;
      border-radius: 7px;
      line-height: 1.5;
      background-color: #fff;
      border: 1px solid #eee;

      span.help {
        font-size: 0.857em;
        font-weight: normal;
      }

      .form-row {
        margin: 0 0 1em;
      }

      p:last-child {
        margin-bottom: 0;
      }

      &::before {
        content: '';
        display: block;
        border: 1em solid #eee;
        border-right-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        position: absolute;
        top: -1em;
        left: 0;
        margin: -1em 0 0 2em;
      }
    }

    .payment_method_paypal {
      .about_paypal {
        float: right;
        line-height: 52px;
        font-size: 0.83em;
      }

      img {
        max-height: 52px;
        vertical-align: middle;
      }
    }
  }
  @include media-breakpoint-down(md) {
    .coupon, .checkout_coupon {
      input[name="coupon_code"] {
        margin-bottom: 5px;
      }
    }
  }
}


/* Shop table */
.shop_table .product-remove,
.shop_table .product-thumbnail,
.shop_table .product-price,
.shop_table .product-stock-status,
.shop_table .product-subtotal,
.shop_table .product-remove,
.woocommerce-orders-table {
  text-align: center;
}
.shop_table .product-remove {
  text-align: center;
  a {
    display: flex;
    align-items:center;
    justify-content:center;
    margin: 0 auto;
    width: 24px;
    height: 24px;
    line-height: 21px;
    border-radius: 50%;
    transition: all 300ms ease-out;
    background-color: var(--theme-color1);
    color: var(--text-color-bg-theme-color1) !important;
    text-align: center;
  }
}
.shop_table thead, .shop_table thead th, .woocommerce-MyAccount-navigation li.is-active {
  background-color: #fafafa !important;
  border-bottom-color: var(--theme-color1) !important;
}
.shop_table thead th, .woocommerce table.wishlist_table thead th, .woocommerce-MyAccount-navigation li.is-active {
  color: #212121;
  border-width: 1px;
  border-style: solid;
  border-color: #e0e0e0;
}
@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive ,
  .woocommerce-page table.shop_table_responsive {
    tbody tr:first-child td:first-child {
      border-top: 1px solid #e6e6e6;
    }
    tr {
      &.woocommerce-cart-form__cart-item {
        td {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      td {
        &:before {
          font-family: $heading-font;
          font-weight: $headings-font-weight-h4;
          line-height: $headings-line-height-smaller;
          color: $headings-color;
        }
      }
    }
    .product-remove {
      text-align: center !important;
      padding: 15px 20px;
    }
    .quantity {
      display: inline-block;
      margin: 0;
    }
    .order-total td {
      background-color: transparent !important;
    }
  }
}

.woocommerce-checkout {
  .woocommerce-form-coupon-toggle {
    margin-bottom: 20px;
    .woocommerce-info {
      padding: 1.25rem 1.25rem;
      .showcoupon {
        @include media-breakpoint-up(sm) {
          margin-left: 10px;
        }
      }
    }
  }
  .checkout_coupon.woocommerce-form-coupon {
    margin: 1px 0 !important;
    padding: 1px 0 !important;
  }
  .woocommerce-NoticeGroup-checkout .woocommerce-error {
    display: block;
  }
  .woocommerce-billing-fields {
    .title {
      margin-bottom: 30px;
    }
  }
  .woocommerce-additional-fields {
    .title {
      margin-bottom: 30px;
    }
  }
  #order_review_heading {
    margin-bottom: 30px;
  }
  form.woocommerce-checkout {
    margin-top: 40px;
    #customer_details {
      h3 {
        font-size: $h4-font-size;
        font-weight: $headings-font-weight-h4;
      }
    }
  }
  .woocommerce-checkout-review-order-table {
    font-size: 1rem;
    thead > tr > th {
      font-size: $body-font-size;
    }
    dl.variation dt {
      color: #444;
      font-size: 0.9rem;
      float: left;
      clear: both;
      margin-right: .25em;
      display: inline-block;
      list-style: none outside
    }
    dl.variation dd {
      font-size: 0.9rem;
      margin: 0
    }
    dl.variation p, 
    dl.variation:last-child {
      margin-bottom: 0
    }
  }
}

.woocommerce-MyAccount-navigation {
  margin-bottom: 30px;
}