@import url('../../style/mixins');
.pay {
  padding: @padding-xs;
}
.price-box {
  background-color: @white;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .text-13;
  color: @black;
  border-radius: @border-radius-sm;

  .price{
    .text-30;
    color: @font-color-red;
    font-weight: bold;
    margin-top: @padding-xs;
    &:before{
      content: '￥';
      .text-14;
      font-weight: bold;
    }
  }
  .time{
    display: flex;
    align-items: center;
    margin-top: @padding-unit;
  }
}
.payBtn{
  width: 100%;
  position: fixed;
  padding-left: @padding-lg;
  padding-right: @padding-lg;
  padding-top: 10px;
  box-sizing: border-box;
  z-index: 99;
  bottom: 0;
  left:0;
  background-color:@white;
  padding-bottom: calc(10px + constant(safe-area-inset-bottom));
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  button{
    .text-16;
    width: 100%;
    color: @white;
    font-size: @line-height-sm;
    border-radius: @border-radius-lx;
    span{
      font-weight: bold;
    }
  }
  button[disabled] {
    color: rgba(255,255,255,.6);
  }
  &-primary {
    @primary-bg();
  }
}
.btn{
  width: 100%;
  position: fixed;
  padding-left: @padding-lg;
  padding-right: @padding-lg;
  padding-top: 10px;
  padding-bottom: calc(10px + constant(safe-area-inset-bottom));
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  bottom: 0;
  left:0;
  background-color:@white;
  display: flex;
  align-items: center;
  justify-content: center;
  button{
    flex:1;
    color: @white;
    font-size: @line-height-sm;
    border-radius: @border-radius-lx;
  }
  button[disabled] {
    color: rgba(255,255,255,.6);
  }
  &-primary {
    @primary-bg();
  }
  &-default{
    border: 1px solid @cherry-color-error;
    color: @cherry-color-error !important;
    margin-right: @padding-xs;
    background-color: @white !important;
  }

}
.placeholder{
  width: 100%;
  height: 100px;
}