@import '../../assets/scss/mixin.scss';

.shopping-cart {
  width: 100%;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  height: 100vh; /* 使页面填满整个视口 */

  .checkbox2 {
    width: 19px;
    height: 19px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #cbcbcb;
    margin-right: 10px;
  }

  .checkbox-img {
    width: 19px;
    height: 19px;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 10px;
  }

  .checkbox {
    border-radius: 100%;

    .ant-checkbox-inner {
      border-radius: 100% ;
    }

    .ant-checkbox-checked:after {
      border-radius: 100%;
      border-color: #EC5C29;
    }

    .ant-checkbox-input:focus+.ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner {
      border-color: #EC5C29;
    }
    .ant-checkbox-checked .ant-checkbox-inner {
      background: #EC5C29;
    }

    .ant-checkbox-input:focus + .ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner {
      border-color: #d9d9d9;
    }
  }

  :deep(.ant-checkbox-inner) {
    border-radius: 100% !important;
  }

  :deep(.van-badge__wrapper) {
    background: #ffffff;
    border-color: #cbcbcb;
  }

  .header {
    @include flexMixer(space-between);
    //padding: 0 12.5px;
  }

  .footer {
    background-color: white;
    text-align: center;
    padding: 0 12.5px;
    position: fixed; /* 将footer固定在页面底部 */
    bottom: 0;
    height: 48px;
    width: 100%; /* 使footer宽度占满页面 */

    .box {
      height: 100%;
      @include flexMixer(space-between, center);

      .left {
        height: 100%;
        @include flexMixer(start);

        .text {
          font-weight: 500;
          font-size: 14px;
          color: #999999;
          margin-left: 5px;
        }

        :deep(.van-badge__wrapper) {
          width: 16px;
          height: 16px;
          @include flexMixer();
          font-size: 12px;
          margin-right: 6px;
          //margin-top: 2px;
        }
      }
      .footer-info {
        @include flexMixer(start);

        .text {
          font-weight: 500;
          font-size: 13px;
          color: #999999;

          span {
            color: #333333;
          }
        }

        .price {
          font-weight: bold;
          font-size: 17px;
          color: #ec5c29;
          margin-right: 10px;
        }

        .btn {
          width: 92px;
          height: 30px;
          background: linear-gradient(90deg, #f19035, #ed602b);
          border-radius: 15px;
          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          @include flexMixer();
        }
      }
    }

    .box2 {
      .footer-info {
        .btn {
          background: #f44341;
          margin-left: 10px;
        }
      }
    }
  }
}