/* pages/voucher/voucher.wxss */
.voucher{
  padding: 10px;
  height: calc(100vh - 100px);
  overflow-y: auto;
}
.all{
  height: calc(100vh - 30px) !important;
}
.shadow{
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
  border-radius: 5px;
}
.buyVoucher{

}
.head{
  width: fit-content;
  padding: 5px 15px;
  border-radius: 5px;
  color: white;
  font-size: 24rpx;
  background: var(--themeColor)
}
.buyVoucher_content{
  padding: 8px;
}

.voucher_type{
  margin-top: 0px;
  height: 170px;
  width: 100%;
  white-space: nowrap;
  display: flex;
}
.voucher_item{
  min-width: 200px;
  max-width: 200px;
  height: 120px;
  margin-right: 20px;
}
.voucher_item_content{
  /* background-color: rgb(255, 247, 245); */
  background-color: #3754BA;
  border-radius: 10px;
}
.voucher_name{
  /* background-color: rgb(255, 212, 216); */
  background-color: #FDF3DB;
  width: 80%;
  margin: 10px auto;
  text-align: center;
  border-radius: 0 0 10px 10px ;
}
.voucher_amount{
  font-size: 45rpx;
  /* color: red; */
  color: white;
  text-align: center;
}
.voucher_threshold{
  font-size: 28rpx;
  /* color: rgb(235, 117, 88); */
  color: white;
  text-align: center;
}
.foot{
  font-size: 26rpx;
  text-align: center;
  /* color: white; */
  color:black;
  border-radius: 0 0 10px 10px;
  /* background-color: rgb(252, 79, 117); */
  background-color: #FDF3DB;
  padding: 15px 5px 5px 5px  ;
  position: relative;
}
.foot::before{
  content: "";  
  position: absolute;  
  top: 0px; /* 伪元素定位在容器上方 */  
  left:0px;  
  width: 100%;  
  height: 10px; /* 伪元素的高度，可以根据需要调整 */  
  /* background-color: rgb(255, 247, 245); 和容器背景色相同   */
  background-color: #3754BA;
  border-radius:100% /  0 0 30px  30px; /* 这里是关键，设置边框半径来实现弧形效果 */ 
}

.voucher_price{
  margin-top: 10px;
  color:rgb(235, 117, 88) ;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.voucher_price1{
  color:red !important;
}
.pay{
  display: flex;
  justify-content: flex-end;
  padding: 0 10px 10px 0;
}
.payBtn{
  background-color: var(--themeColor);
  border-radius: 5px;
  padding: 4px 12px;
  width: fit-content;
  color: white;
  font-size: 30rpx;
}

.myVoucher{
  margin-top: 20px;
  min-height: 200px;
  
}
.disabled{
  opacity: 0.5;
  background-color: red;
  pointer-events: none;
  color: darkgray !important;
}
.myVoucher_content{
  padding: 8px;
}
.myVoucher_item{
  background-color: var(--themeColor);
  padding: 8px;
  border-radius: 10px;
  color: white;
  margin-bottom: 10px;
}
.myVoucher_item_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.myVoucher_item_top_right{
  display: flex;
  align-items: center;
}
.myVoucher_name{
  font-size: 32rpx;
}
.myVoucher_expirationTime{
  margin-top: 8px;
  background-color: rgb(252, 236 , 230);
  color: red;
  padding: 4px;
  font-size: 22rpx;
  width: fit-content;
  border-radius: 5px;
}
.myVoucher_amount{
  font-size: 46rpx;
  color:red;
  /* color:rgb(230, 42, 42); */
}
.myVoucher_threshold{
  color: rgb(255, 212, 216);
  font-size: 24rpx;
}
.myVoucher_item_bottom{
  margin-top: 10px;
  padding: 10px 0;
  border-top: darkgray dashed 1px;
  color: darkgray;
  font-size: 28rpx;
}
.submit{
  position: fixed;
  bottom: 10px;
  margin: 10px;
  font-size: 26rpx;
  padding-left: 10px;
  color: white;
  background: rgb(49, 46, 46);
  width: calc(100% - 30px);
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 50px ;
}
.submit_btn{
  font-size: 30rpx;
  height: 100%;
  min-width: 70px;
  text-align: center;
  border-radius: 0 50px 50px 0;
  padding:0 10px;
  background-color: var(--themeColor);
}

.empty{
  text-align: center;
  line-height: 150px;
  color: darkgray;
}

.delete{
  color: darkgray;
  font-size: 26rpx;
  text-decoration: line-through;
}
