.o-shopping-cart{}

.o-shoppingcart__header {
  @include font-size(xxl);
  margin-top: 20px;
  margin-bottom: 20px;
}

.o-shoppingcart {
  margin-bottom: 60px;
}

.o-shoppingcart__list {
  overflow: visible;
  vertical-align: top;
  padding: 0 30px;

  div.remarks-box {
    background-color: white;
    box-shadow: 2px 2px 15px 5px rgba(22, 57, 95, 0.05);
    margin-bottom: 30px;
    padding: 30px;

    h4 {
      color: #323232;
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
      margin: 0;
      text-transform: uppercase;
    }

    input {
      width: 100%;
      height: 43px;
      padding: 15px;
      border: 1px solid #e0e1e3;
      font-size: 14px;
      line-height: 14px;
    }
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: white;
    box-shadow: 2px 2px 15px 5px rgba(22, 57, 95, 0.05);
    margin-bottom: 30px;

    li {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      overflow: visible;
      width: 100%;
      padding: 30px 50px 20px 30px;
      border: 1px solid #e0e1e3;

      & + li {
        border-top: none;
      }

      .close {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0;
        top: 0;
        width: 50px;
        height: 50px;
        color: #f95d5d;
        line-height: 0.4;
        text-decoration: none;
        font-weight: bold;
        font-size: 22px;
      }

      .left, .right {
        display: inline-block;
        vertical-align: top;
      }

      .left {
        font-size: 16px;
        line-height: 24px;

        p {
          text-transform: uppercase;
          color: #8791a0;
          font-size: 14px;
          font-weight: 500;
          line-height: 23px;

          label {
            color: #2d323c;
            font-weight: bold;
          }
        }

        h3 {
          color: #3c414b;
          font-size: 20px;
          font-weight: 600;
          line-height: 32px;
          margin-top: 0;

          a {
            color: blue;
            text-decoration: none;
          }
        }
      }

      .right {
        text-align: right;
        color: #3c414b;
        display: inline-flex;
        align-items: center;
        width: 250px;

        .order-box {
          margin-top: 0;
          .amount-label {
            margin-right: 10px;
          }

          .amount-box {
            margin: 0;
            margin-right: 30px;
            padding: 0;
            width: auto;

            .amount {
              margin-right: 0;
              width: 50px;
            }

            .increase,
            .decrease {
              width: 30px;
              height: 30px;
              cursor: pointer;
              color: white;
              font-weight: bold;
              background-color: #b3b3b3;
              display: inline-flex;
              justify-content: center;
              align-items: center;
              border-radius: 3px;
              text-decoration: none;
            }
          }
        }

        .price {
          margin-left: auto;
          font-size: 20px;
          font-weight: bold;
          line-height: 24px;

          p {
            font-size: 15px;
            font-weight: 500;
            line-height: 24px;

            &.plain {
              color: #67717a;
            }
          }
        }
      }
    }
  }

  .devButtons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -20px;
    margin-bottom: 20px;
  }
}

.o-shoppingCart__overview {
  vertical-align: top;
  text-align: right;

  .box {
    margin-bottom: 30px;
    padding: 30px;

    h3 {
      color: #696e73;
      font-size: 20px;
      font-weight: bold;
      line-height: 24px;
      text-transform: uppercase;
      display: inline-block;
      vertical-align: top;
      margin-top: 0;
    }

    p {
      color: #67717a;
      //font-family: $fontFamily;
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 30px;

      b {
        color: #323232;
      }
    }

    &.order-overview {
      h5 {
        color: #696e78;
        font-size: 16px;
        line-height: 24px;
        font-weight: normal;

        span {
          color: blue;
          font-size: 20px;
          font-weight: 600;
          line-height: 32px;
        }
      }

      input[type=submit] {
        display: inline-block;
        margin-top: 20px;
        margin-left: 15px;
        padding: 5px 12px;
        background-color: #66bdff;
        font-size: 16px;
        font-weight: 500;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        outline: none;
      }
    }
  }
}

input.hidden {
  display: none;
}

.shopButtons {
  overflow: visible;

  a.button:first-of-type {
    margin-right: 30px;
  }

  form {
    display: inline-block;
  }
}

.delete-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
  border: solid 1px red;
  justify-content: center;
  align-items: center;

  .modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .modal-box {
    display: block;
    width: 400px;
    background-color: white;
    //@include flex(center center);
    flex-direction: column;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    position: relative;
    padding: 30px;
    box-shadow: 2px 2px 15px 5px rgba(22, 57, 95, 0.2);

    h3 {
      color: blue;
      margin: 0;
    }

    .close {
      display: block;
      position: absolute;
      right: 20px;
      top: 25px;
      width: 15px;
      height: 15px;
      color: grey;
      line-height: 0.4;
      text-decoration: none;
      font-weight: bold;
      font-size: 22px;
    }

    p {
      color: grey;
    }

    .buttons {
      margin-top: 10px;

      a.button {
        text-transform: uppercase;

        &:first-of-type {
          margin-right: 10px;
        }

        &.blue {
          background-color: blue;
        }

        &.yellow {
          background-color: yellow;
        }

        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }
}


@include mq(null, 1100) {
  .shoppingCartContent {
    div.shoppingcartItemList,
    .shoppingCartInfoBar {
      width: 100%;
      margin-left: 0;
      overflow: visible;
    }
  }
}


@include mq(null, 1100) {
  .shoppingCartContent {
    div.shoppingcart-header {
      h1 {
        width: auto;
        display: block;
      }

      a.button {
        display: none;
      }
    }

    .shopButtons {
      padding: 30px 0;
    }
  }
}


@include mq(null, 425) {
  .shoppingCartContent {
    margin-bottom: 0;

    div.shoppingcart-header,
    div.shoppingcartItemList p {
      padding: 0 20px;
    }

    .shopButtons {
      padding: 30px 20px;
    }

    .shoppingCartInfoBar {
      .box {
        margin-bottom: 0;
        box-shadow: none;

        &.order-overview {
          border-bottom: 1px solid #e0e1e3;
        }
      }
    }
  }
}