/* 容器样式 */
.container {
  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
}

/* 提交订单区域样式 */
.submit-order {
  margin-bottom: 100rpx; /* 底部外边距为100响应式像素 */
  padding-bottom: 160rpx; /* 底部内边距为160响应式像素 */

  .delivery-addr { /* 配送地址样式 */
    position: relative; /* 相对定位，用于内部元素的绝对定位 */
    background: #fff; /* 背景颜色为白色 */

    .addr-icon { /* 地址图标样式 */
      width: 32rpx; /* 图标宽度为32响应式像素 */
      height: 32rpx; /* 图标高度为32响应式像素 */
      display: block; /* 作为块级元素显示 */
      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
      left: 30rpx; /* 距离左侧30响应式像素 */
      top: 24rpx; /* 距离顶部24响应式像素 */

      image { /* 图片样式 */
        width: 100%; /* 宽度占满父元素 */
        height: 100%; /* 高度占满父元素 */
      }
    }

    .user-info { /* 用户信息样式 */
      padding-top: 20rpx; /* 顶部内边距为20响应式像素 */
      line-height: 48rpx; /* 行高设置为48响应式像素 */
      word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
      word-break: break-all; /* 强制文本在任意字符处换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
      display: -webkit-box; /* 使用Webkit盒模型 */
      -webkit-line-clamp: 1; /* 限制文本显示为1行 */
      -webkit-box-orient: vertical; /* 文本垂直排列 */

      .item { /* 用户信息项样式 */
        font-size: 30rpx; /* 文字大小为30响应式像素 */
        margin-right: 30rpx; /* 右侧外边距为30响应式像素 */
        vertical-align: top; /* 垂直对齐方式为顶部 */
        display: inline-block; /* 作为行内块级元素显示 */
      }
    }

    .addr { /* 地址样式 */
      font-size: 26rpx; /* 文字大小为26响应式像素 */
      line-height: 36rpx; /* 行高设置为36响应式像素 */
      color: #999; /* 文本颜色为灰色 */
      width: 90%; /* 宽度为父元素的90% */
      padding-bottom: 20rpx; /* 底部内边距为20响应式像素 */
      margin-top: 15rpx; /* 顶部外边距为15响应式像素 */
      word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
    }

    .arrow { /* 箭头样式 */
      width: 15rpx; /* 宽度为15响应式像素 */
      height: 15rpx; /* 高度为15响应式像素 */
      border-top: 2rpx solid #777; /* 上边框为2响应式像素宽的灰色实线 */
      border-right: 2rpx solid #777; /* 右边框为2响应式像素宽的灰色实线 */
      transform: rotate(45deg); /* 旋转45度形成箭头形状 */
      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
      right: 30rpx; /* 距离右侧30响应式像素 */
      top: 60rpx; /* 距离顶部60响应式像素 */
    }

    .arrow.empty { /* 空状态下的箭头样式 */
      top: 39rpx; /* 距离顶部39响应式像素 */
    }
  }
}

.delivery-addr { /* 配送地址样式（重复定义，可能用于覆盖或扩展） */
  .addr-bg { /* 地址背景样式 */
    .add-addr { /* 添加地址按钮样式 */
      .plus-sign { /* 加号样式 */
        color: #eb2444; /* 文本颜色为红色 */
        border: 2rpx solid #eb2444; /* 边框为2响应式像素宽的红色实线 */
        padding: 0rpx 6rpx; /* 内边距为上下0响应式像素，左右6响应式像素 */
        margin-right: 10rpx; /* 右侧外边距为10响应式像素 */
      }

      font-size: 28rpx; /* 文字大小为28响应式像素 */
      color: #666; /* 文本颜色为深灰色 */
      display: flex; /* 使用Flex布局 */
      align-items: center; /* 垂直居中对齐 */
      padding: 30rpx 0; /* 上下内边距为30响应式像素 */
    }

    padding: 0 30rpx; /* 左右内边距为30响应式像素 */
  }

  .addr-bg.whole { /* 整个地址背景样式 */
    padding: 0 39rpx 0 77rpx; /* 左右内边距分别为39响应式像素和77响应式像素 */
  }
}

.addr-bg { /* 地址背景样式（重复定义，可能用于覆盖或扩展） */
  .add-addr { /* 添加地址按钮样式 */
    .plus-sign-img { /* 加号图片样式 */
      width: 32rpx; /* 宽度为32响应式像素 */
      height: 32rpx; /* 高度为32响应式像素 */
      font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
      margin-right: 10rpx; /* 右侧外边距为10响应式像素 */

      image { /* 图片样式 */
        width: 100%; /* 宽度占满父元素 */
        height: 100%; /* 高度占满父元素 */
      }
    }
  }
}

.prod-item { /* 商品项样式 */
  background-color: #fff; /* 背景颜色为白色 */
  margin-top: 15rpx; /* 顶部外边距为15响应式像素 */
  font-size: 28rpx; /* 文字大小为28响应式像素 */

  .item-cont { /* 商品内容样式 */
    .prod-pic { /* 商品图片样式 */
      image { /* 图片样式 */
        width: 180rpx; /* 宽度为180响应式像素 */
        height: 180rpx; /* 高度为180响应式像素 */
        width: 100%; /* 宽度占满父元素 */
        height: 100%; /* 高度占满父元素 */
      }

      font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
      display: block; /* 作为块级元素显示 */
      width: 160rpx; /* 宽度为160响应式像素 */
      height: 160rpx; /* 高度为160响应式像素 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      background: #fff; /* 背景颜色为白色 */
      margin-right: 16rpx; /* 右侧外边距为16响应式像素 */
    }

    display: flex; /* 使用Flex布局 */
    align-items: center; /* 垂直居中对齐 */
    padding: 30rpx; /* 内边距为30响应式像素 */
    border-bottom: 2rpx solid #f1f1f1; /* 底部边框为2响应式像素宽的浅灰色实线 */

    .prod-info { /* 商品信息样式 */
      margin-left: 10rpx; /* 左侧外边距为10响应式像素 */
      font-size: 28rpx; /* 文字大小为28响应式像素 */
      width: 100%; /* 宽度占满父元素 */
      position: relative; /* 相对定位，用于内部元素的绝对定位 */
      height: 160rpx; /* 高度为160响应式像素 */
      flex: 1; /* 占用剩余空间 */

      .prodname { /* 商品名称样式 */
        font-size: 28rpx; /* 文字大小为28响应式像素 */
        line-height: 40rpx; /* 行高设置为40响应式像素 */
        max-height: 86rpx; /* 最大高度为86响应式像素 */
        overflow: hidden; /* 隐藏超出容器的内容 */
        display: -webkit-box; /* 使用Webkit盒模型 */
        -webkit-line-clamp: 2; /* 限制文本显示为2行 */
        -webkit-box-orient: vertical; /* 文本垂直排列 */
        text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
        word-break: break-all; /* 强制文本在任意字符处换行 */
      }

      .prod-info-cont { /* 商品信息内容样式 */
        color: #999; /* 文本颜色为灰色 */
        line-height: 40rpx; /* 行高设置为40响应式像素 */
        margin-top: 10rpx; /* 顶部外边距为10响应式像素 */
        font-size: 22rpx; /* 文字大小为22响应式像素 */
        overflow: hidden; /* 隐藏超出容器的内容 */
        display: -webkit-box; /* 使用Webkit盒模型 */
        -webkit-line-clamp: 1; /* 限制文本显示为1行 */
        -webkit-box-orient: vertical; /* 文本垂直排列 */
        text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
        word-break: break-all; /* 强制文本在任意字符处换行 */
      }
    }
  }

  .order-num { /* 订单数量样式 */
    padding: 20rpx 30rpx; /* 内边距为上下20响应式像素，左右30响应式像素 */
    display: flex; /* 使用Flex布局 */
    justify-content: space-between; /* 水平两端对齐 */
    font-size: 28rpx; /* 文字大小为28响应式像素 */

    .clear-btn { /* 清空按钮样式 */
      width: 32rpx; /* 宽度为32响应式像素 */
      height: 32rpx; /* 高度为32响应式像素 */
      font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
      vertical-align: top; /* 垂直对齐方式为顶部 */
      margin-top: 6rpx; /* 顶部外边距为6响应式像素 */
      margin-left: 42rpx; /* 左侧外边距为42响应式像素 */
      position: relative; /* 相对定位，用于内部元素的绝对定位 */

      &::after { /* 清空按钮后的竖线样式 */
        content: " "; /* 生成伪元素 */
        display: block; /* 作为块级元素显示 */
        position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
        left: -10px; /* 距离左侧-10像素 */
        top: 1px; /* 距离顶部1像素 */
        width: 1px; /* 宽度为1像素 */
        height: 12px; /* 高度为12像素 */
        background: #ddd; /* 背景颜色为浅灰色 */
      }

      .clear-list-btn { /* 清空列表按钮样式 */
        width: 100%; /* 宽度占满父元素 */
        height: 100%; /* 高度占满父元素 */
        vertical-align: middle; /* 垂直居中对齐 */
      }
    }
  }

  .total-num { /* 总数量样式 */
    text-align: right; /* 文本右对齐 */
    padding: 20rpx 30rpx; /* 内边距为上下20响应式像素，左右30响应式像素 */
    font-size: 28rpx; /* 文字大小为28响应式像素 */

    .prodprice { /* 商品价格样式 */
      display: inline-block; /* 作为行内块级元素显示 */
      color: #333; /* 文本颜色为深灰色 */
    }

    .prodcount { /* 商品数量样式 */
      margin-right: 20rpx; /* 右侧外边距为20响应式像素 */
    }
  }

  .price-nums { /* 价格和数量样式 */
    .prodprice { /* 商品价格样式 */
      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
      bottom: 0; /* 距离底部0响应式像素 */
    }

    .prodcount { /* 商品数量样式 */
      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
      bottom: 5rpx; /* 距离底部5响应式像素 */
      right: 0; /* 距离右侧0响应式像素 */
      color: #999; /* 文本颜色为灰色 */
      font-family: verdana; /* 字体系列为Verdana */
    }
  }
}

.order-state { /* 订单状态样式 */
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中对齐 */
}

.order-msg { /* 订单消息样式 */
  background: #fff; /* 背景颜色为白色 */
  margin-top: 15rpx; /* 顶部外边距为15响应式像素 */
  padding: 0 30rpx; /* 左右内边距为30响应式像素 */
  font-size: 28rpx; /* 文字大小为28响应式像素 */

  .msg-item { /* 消息项样式 */
    border-top: 2rpx solid #f1f1f1; /* 顶部边框为2响应式像素宽的浅灰色实线 */

    &:first-child { /* 第一个消息项样式 */
      border: 0; /* 移除边框 */
    }

    .item { /* 消息项内容样式 */
      position: relative; /* 相对定位，用于内部元素的绝对定位 */
      display: flex; /* 使用Flex布局 */
      padding: 16rpx 0; /* 上下内边距为16响应式像素 */
      align-items: center; /* 垂直居中对齐 */

      .item-tit { /* 消息标题样式 */
        line-height: 48rpx; /* 行高设置为48响应式像素 */
      }

      .item-txt { /* 消息文本样式 */
        flex: 1; /* 占用剩余空间 */
        font-family: arial; /* 字体系列为Arial */
        max-height: 48rpx; /* 最大高度为48响应式像素 */
        overflow: hidden; /* 隐藏超出容器的内容 */
        line-height: 48rpx; /* 行高设置为48响应式像素 */
        display: -webkit-box; /* 使用Webkit盒模型 */
        -webkit-line-clamp: 1; /* 限制文本显示为1行 */
        -webkit-box-orient: vertical; /* 文本垂直排列 */
        text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
        word-break: break-all; /* 强制文本在任意字符处换行 */
      }

      .item-txt.price { /* 价格文本样式 */
        padding: 0; /* 移除内边距 */
        text-align: right; /* 文本右对齐 */
      }

      input { /* 输入框样式 */
        flex: 1; /* 占用剩余空间 */
      }

      .coupon-btn { /* 优惠券按钮样式 */
        display: block; /* 作为块级元素显示 */
        margin: 0 30rpx; /* 左右外边距为30响应式像素 */
        line-height: 28rpx; /* 行高设置为28响应式像素 */
        color: #999; /* 文本颜色为灰色 */
      }

      .arrow { /* 箭头样式 */
        width: 15rpx; /* 宽度为15响应式像素 */
        height: 15rpx; /* 高度为15响应式像素 */
        border-top: 2rpx solid #999; /* 上边框为2响应式像素宽的灰色实线 */
        border-right: 2rpx solid #999; /* 右边框为2响应式像素宽的灰色实线 */
        transform: rotate(45deg); /* 旋转45度形成箭头形状 */
        position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
        right: 0rpx; /* 距离右侧0响应式像素 */
      }
    }

    .item.payment { /* 支付项样式 */
      border-top: 2rpx solid #f1f1f1; /* 顶部边框为2响应式像素宽的浅灰色实线 */
      color: #eb2444; /* 文本颜色为红色 */
    }

    .item.coupon { /* 优惠券项样式 */
      border-bottom: 2rpx solid #e1e1e1; /* 底部边框为2响应式像素宽的浅灰色实线 */
    }
  }
}

.submit-order-footer { /* 提交订单页脚样式 */
  position: fixed; /* 固定定位，确保始终位于页面底部 */
  bottom: 0; /* 距离页面底部0像素 */
  width: 100%; /* 宽度占满整个屏幕 */
  max-width: 750rpx; /* 最大宽度为750响应式像素 */
  background: #fff; /* 背景颜色为白色 */
  margin: auto; /* 水平居中 */
  display: -webkit-flex; /* 使用Webkit Flex布局 */
  display: -webkit-box; /* 使用Webkit盒模型 */
  display: -moz-box; /* 使用Mozilla盒模型 */
  display: -ms-flexbox; /* 使用IE Flex布局 */
  display: flex; /* 使用标准Flex布局 */
  font-size: 26rpx; /* 文字大小为26响应式像素 */
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05); /* 添加轻微的阴影效果 */

  .sub-order { /* 订单提交按钮样式 */
    flex: 1; /* 占用剩余空间 */
    margin: 0 30rpx; /* 左右外边距为30响应式像素 */
    line-height: 100rpx; /* 行高设置为100响应式像素 */
    display: block; /* 作为块级元素显示 */
    text-align: left; /* 文本左对齐 */
    font-size: 28rpx; /* 文字大小为28响应式像素 */

    .item-txt { /* 订单金额样式 */
      .price { /* 价格样式 */
        display: inline; /* 作为行内元素显示 */
        color: #eb2444; /* 文本颜色为红色 */
        font-size: 28rpx; /* 文字大小为28响应式像素 */
      }
    }
  }

  .footer-box { /* 页脚按钮样式 */
    padding: 0 10rpx; /* 左右内边距为10响应式像素 */
    width: 200rpx; /* 宽度为200响应式像素 */
    background: #eb2444; /* 背景颜色为红色 */
    text-align: center; /* 文本居中对齐 */
    line-height: 100rpx; /* 行高设置为100响应式像素 */
    color: #fff; /* 文本颜色为白色 */
  }
}

.clearfix { /* 清除浮动样式 */
  &:after { /* 生成伪元素清除浮动 */
    content: " "; /* 生成空内容 */
    display: table; /* 作为表格元素显示 */
    clear: both; /* 清除浮动 */
  }
}

.popup-hide { /* 弹出层隐藏样式 */
  position: fixed; /* 固定定位，覆盖整个屏幕 */
  top: 0; /* 距离页面顶部0像素 */
  bottom: 0; /* 距离页面底部0像素 */
  left: 0; /* 距离页面左侧0像素 */
  right: 0; /* 距离页面右侧0像素 */
  z-index: 999; /* 设置较高的堆叠顺序，确保弹出层在其他内容之上 */
  background-color: rgba(0, 0, 0, 0.3); /* 背景颜色为半透明黑色 */
}

.popup-box { /* 弹出层盒子样式 */
  position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
  bottom: 0; /* 距离页面底部0像素 */
  width: 100%; /* 宽度占满整个屏幕 */
  height: 80%; /* 高度为屏幕高度的80% */
  overflow: hidden; /* 隐藏超出容器的内容 */
  background-color: #fff; /* 背景颜色为白色 */
}

.popup-tit { /* 弹出层标题样式 */
  position: relative; /* 相对定位，用于内部元素的绝对定位 */
  height: 46px; /* 高度为46像素 */
  line-height: 46px; /* 行高设置为46像素 */
  padding-left: 10px; /* 左侧内边距为10像素 */
  font-size: 16px; /* 文字大小为16像素 */
  color: #333; /* 文本颜色为深灰色 */
  font-weight: bold; /* 文本加粗 */
}

.close { /* 关闭按钮样式 */
  color: #aaa; /* 文本颜色为浅灰色 */
  border-radius: 12px; /* 圆角半径为12像素 */
  line-height: 20px; /* 行高设置为20像素 */
  text-align: center; /* 文本居中对齐 */
  height: 20px; /* 高度为20像素 */
  width: 20px; /* 宽度为20像素 */
  font-size: 18px; /* 文字大小为18像素 */
  padding: 1px; /* 内边距为1像素 */
  top: 10px; /* 距离顶部10像素 */
  right: 10px; /* 距离右侧10像素 */
  position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */

  &::before { /* 生成关闭符号样式 */
    content: "\2716"; /* 使用Unicode字符表示关闭符号 */
  }
}

.coupon-tabs { /* 优惠券标签样式 */
  display: flex; /* 使用Flex布局 */
  font-size: 14px; /* 文字大小为14像素 */
  justify-content: space-around; /* 水平均匀分布 */
  border-bottom: 1px solid #f2f2f2; /* 底部边框为1像素宽的浅灰色实线 */
}

.coupon-tab { /* 优惠券标签项样式 */
  padding: 10px 0; /* 上下内边距为10像素 */
}

.coupon-tab.on { /* 选中的优惠券标签项样式 */
  border-bottom: 2px solid #eb2444; /* 底部边框为2像素宽的红色实线 */
  font-weight: 600; /* 文本加粗 */
}

.popup-cnt { /* 弹出层内容样式 */
  height: calc(100% - 88px); /* 高度为弹出层盒子高度减去88像素 */
  overflow: auto; /* 允许滚动 */
  padding: 0 10px; /* 左右内边距为10像素 */
  background: #f4f4f4; /* 背景颜色为浅灰色 */
}

.coupon-ok { /* 优惠券确认按钮样式 */
  position: fixed; /* 固定定位，确保始终位于页面底部 */
  bottom: 0; /* 距离页面底部0像素 */
  width: 100%; /* 宽度占满整个屏幕 */
  height: 60px; /* 高度为60像素 */
  line-height: 50px; /* 行高设置为50像素 */
  font-size: 14px; /* 文字大小为14像素 */
  text-align: center; /* 文本居中对齐 */
  box-shadow: 0px -1px 1px #ddd; /* 添加轻微的阴影效果 */

  text { /* 按钮文本样式 */
    border-radius: 20px; /* 圆角半径为20像素 */
    display: inline-block; /* 作为行内块级元素显示 */
    height: 20px; /* 高度为20像素 */
    line-height: 20px; /* 行高设置为20像素 */
    width: 450rpx; /* 宽度为450响应式像素 */
    padding: 7px; /* 内边距为7像素 */
    color: #fff; /* 文本颜色为白色 */
    box-shadow: -1px 3px 3px #aaa; /* 添加轻微的阴影效果 */
  }
}

.botm-empty { /* 底部空白样式 */
  height: 60px; /* 高度为60像素 */
}

checkbox { /* 复选框样式 */
  .wx-checkbox-input { /* 复选框输入框样式 */
    border-radius: 50%; /* 圆形边框 */
    width: 35rpx; /* 宽度为35响应式像素 */
    height: 35rpx; /* 高度为35响应式像素 */
  }

  .wx-checkbox-input.wx-checkbox-input-checked { /* 选中的复选框输入框样式 */
    background: #eb2444; /* 背景颜色为红色 */
    border-color: #eb2444; /* 边框颜色为红色 */

    &::before { /* 选中符号样式 */
      text-align: center; /* 文本居中对齐 */
      font-size: 22rpx; /* 文字大小为22响应式像素 */
      color: #fff; /* 文本颜色为白色 */
      background: transparent; /* 背景颜色为透明 */
      transform: translate(-50%, -50%) scale(1); /* 居中并缩放 */
      -webkit-transform: translate(-50%, -50%) scale(1); /* Webkit浏览器兼容 */
    }
  }
}
