// -----------------------------------------------------------------------------
// This file contains styles that are specific to the checkout page.
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$m}
--------------------------------------------------------------*/


.msg {
  background-color: $g-white;
  box-shadow: 0 6px 15px 0 rgba(36,37,38,.08);
  padding: 20px;

  &__text {
    padding: 8px 0;
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: $g-brand-secondary-color;
  }
}

.l-f {
  &__form {
    width: 100%;
  }

  // Apply to these components
  .input-text {
    width: 100%;
  }

  .input-text,.btn {
    border-radius: 6px;
  }
// components end

    .btn {
      font-weight: 600;
      padding: 12px 18px;// Noted
    }
}

// coupon form
.c-f {
  &__form {
    position: relative;
    width: 50%;
  }
  .input-text {
    width: 100%;
  }
  .input-text,.btn {
    border-radius: 6px;
  }

  .btn {
    font-weight: 600;
    padding: 12px 18px;// Noted
  }

}

// Checkout form
.checkout-f {
  width: 100%;
    .input-text,.select-box,.text-area,.btn {
      width: 100%;
      border-radius: 6px;
    }
    .text-area {
      height: 185px;
    }

    .btn {
      font-weight: 600;
      padding: 18px;
    }
}


.checkout-f__h1 {
  color: $g-brand-secondary-color;
  font-size: 18px;
  margin-bottom: 8px;// has margin-bottom
}


.o-summary {

  &__section {
    background-color: $g-white;
    border: 1px solid #eee;
  }

    &__box {
      padding: 20px;
    }

    &__item-wrap {
      // place only 2 products on slot (height of 1 product is 86) so 86 + 86 + (margin-bottom of 1:22) + (padding-top:17) + (padding-top:17)
      // 120 + 120 + 22 + 17 + 17 = 228px
      max-height: 228px;
      padding: 17px;
      overflow-y: auto;
    }


  &__table {
    width: 100%;
    border-collapse: collapse;
    td {
      color: $g-brand-secondary-color;
      vertical-align: middle;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 0;
    }
    td:first-child {
      text-align: left;
    }
    td {
      text-align: right;
    }
    tr:last-child {
      td {
        font-size: 16px;
        font-weight: 700;
        color: $g-brand-color;
      }
    }
  }
}

.o-card {
  border: 1px solid #f5f5f5;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  background-color: $g-white;
  padding: 10px;
  margin-bottom: 22px;
  &:last-child {
    margin-bottom: 0;
  }

  &__flex {
    display: flex;
    align-items: center;
  }


  &__img-wrap {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    background-color: $g-card-bg-color;
    img {
      display: block;
      min-width: 60px;
    }
  }
  &__info-wrap {
    margin-left: 18px;
  }

  &__name {
    display: block;
    > a {
      color: $g-brand-secondary-color;
      font-size: 13px;
      font-weight: 600;
      transition: color 0.5s;
      &:hover {
        color: $g-brand-color;
      }
    }
  }

  &__quantity {
    font-size: 13px;
    margin-bottom: 2px;
    display: block;
  }

  &__price {
    display: block;
    color: $g-brand-color;
    font-size: 13px;
    font-weight: 600;
  }

  &__del {
    padding: 10px;
    font-size: 16px;
    display: inline-block;
    color: $g-brand-secondary-color;
    transition: color 0.5s;
    &:hover {
      color: $g-brand-color;
    }
  }

}



// Ship Bill
.ship-b {
  &__text {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: $g-brand-secondary-color;
    margin-bottom: 4px;
  }

  &__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__p {
    margin-bottom: 4px;
    color: #7f7f7f;
    font-weight: 600;
    font-size: 13px;
    flex: 0 0 50%;
    max-width: 50%;
  }

  &__edit {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
  }
}





@media(max-width:575px) {


  .o-summary__item-wrap {
    // Height calculated with product name which has long text
    // place only 2 products on slot (height of 1 product is 205) so 205 + 205 + (margin-bottom of 1:22) + (padding-top:17) + (padding-top:17)
    // 205 + 205 + 22 + 17 + 17 = 466
    max-height: 466px;
  }

  .o-card {
    &__flex {
      display: block;
      padding: 14px;
      text-align: center;
    }

    &__info-wrap {
      margin-left: 0;
    }
  }


  // Ship Bill
  .ship-b {
    &__box {
      display: block;
    }
    &__p {
      max-width: 100%;
    }
  }


}