/** app.wxss **/

/* 
 * 容器样式
 * 设置容器的高度为100%，确保其占据整个屏幕高度。
 * 使用 border-box 模型，使得 padding 和 border 包含在元素的总宽度和高度内。
 * 设置文本颜色为 #333，并指定字体系列以确保跨平台一致性。
 */
.container {
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, 'Heiti SC', PingFangSC-Light;
}

/* 
 * 价格样式
 * 设置价格的字体为 Arial，显示为行内块级元素，颜色为红色 (#eb2444)。
 * 添加底部和左侧的内边距，使价格与其他内容之间有适当的间距。
 */
.price {
  font-family: Arial;
  display: inline-block;
  color: #eb2444;
  padding-bottom: 10rpx;
  padding-left: 10rpx;
}

/* 
 * 价格符号（如¥、$等）样式
 * 设置符号的字体大小为 24rpx。
 */
.symbol {
  font-size: 24rpx;
}

/* 
 * 大号数字样式
 * 设置大号数字的字体大小为 32rpx。
 */
.big-num {
  font-size: 32rpx;
}

/* 
 * 小号数字样式
 * 设置小号数字的字体大小为 24rpx。
 */
.small-num {
  font-size: 24rpx;
}

/*
 * 改变checkbox样式
 * 自定义样式以适应应用设计
 */

/* 
 * checkbox 组样式
 * 设置 checkbox 组的宽度为 100%，确保其占满整个父容器。
 */
uni-checkbox-group {
  width: 100% !important;
}

  /* 
 * checkbox 标签样式
 * 设置每个 checkbox 标签的宽度为 33%，并使用行内弹性布局，使其在一行中均匀分布。
 * 添加底部外边距，确保标签之间有足够的间距。
 */
  uni-checkbox-group uni-label {
    width: 33% !important;
    display: inline-flex;
    margin-bottom: 20rpx;
  }

/* 
 * checkbox 选项框大小
 * 设置 checkbox 选项框的宽度和高度为 38rpx，并设置为圆形（border-radius: 50%）。
 */
uni-checkbox .uni-checkbox-input {
  width: 38rpx !important;
  height: 38rpx !important;
  border-radius: 50% !important;
}

  /* 
 * checkbox 选中后样式
 * 设置选中后的 checkbox 背景颜色为红色 (#e43130)，并移除默认边框。
 */
  uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
    background: #e43130;
    border: 1px solid transparent !important;
  }

    /* 
 * checkbox 选中后图标样式
 * 设置选中后的 checkbox 图标的样式，包括尺寸、对齐方式、字体大小和颜色。
 * 使用 transform 属性调整图标的居中位置和缩放比例。
 */
    uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
      display: inline-block;
      width: 20rpx;
      height: 20rpx;
      line-height: 20rpx;
      text-align: center;
      font-size: 18rpx;
      color: #fff;
      background: transparent;
      transform: translate(-60%, -50%) scale(1);
      -webkit-transform: translate(-60%, -50%) scale(1);
    }

/*
 * 改变radio样式
 * 自定义样式以适应应用设计
 */

/* 
 * 未选中的 radio 背景样式
 * 设置未选中的 radio 选项框的高度和宽度为 36rpx，背景透明，并设置为圆形。
 */
uni-radio .uni-radio-input {
  height: 36rpx;
  width: 36rpx;
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
}

  /* 
 * 选中后的 radio 背景样式
 * 设置选中后的 radio 选项框的背景颜色为红色 (#e43130)，并移除默认边框。
 */
  uni-radio .uni-radio-input.uni-radio-input-checked {
    border: none !important;
    background: #e43130 !important;
  }

    /* 
 * 选中后的 radio 对勾样式
 * 设置选中后的 radio 对勾的样式，包括尺寸、对齐方式、字体大小和颜色。
 * 使用 transform 属性调整对勾的居中位置和缩放比例。
 */
    uni-radio .uni-radio-input.uni-radio-input-checked::before {
      border-radius: 50%;
      width: 32rpx;
      height: 32rpx;
      line-height: 32rpx;
      text-align: center;
      font-size: 20rpx;
      color: #fff;
      background: #e43130;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(1);
      -webkit-transform: translate(-50%, -50%) scale(1);
    }

/* 
 * 底部按钮兼容 iPhone X以上
 * 为特定屏幕尺寸的设备（如 iPhone X 及以上）添加额外的底部内边距，以避免底部按钮被虚拟键盘遮挡。
 */
@media screen and (width: 375px) and (height: 812px) {
  .container {
    padding-bottom: 70px;
  }
}

/* 
 * 底部按钮兼容 iPhone 8 Plus
 * 为特定屏幕尺寸的设备（如 iPhone 8 Plus）添加额外的底部内边距，以避免底部按钮被虚拟键盘遮挡。
 */
@media screen and (width: 414px) and (height: 736px) {
  .container {
    padding-bottom: 70px;
  }
}
