qingcheng-xiaochengxu/pages/course/createCourseOrder/createCourseOrder.wxss

/* 页面与滚动容器 */
.page {
  background-color: #f7f7f7;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 24rpx 24rpx 160rpx; /* bottom 预留给固定底部栏 */
  box-sizing: border-box;
}

.no-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* 通用卡片 */
.card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
}

.card + .card {
  margin-top: 20rpx;
}

/* 商品信息卡片 */
.product {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 20rpx;
}

.cover {
  width: 260rpx;
  height: 180rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
  background: #f2f2f2;
}

.info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0; /* 使多行省略生效 */
}

.title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f1f1f;
  line-height: 48rpx;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
  margin-top: 8rpx;
}

.price-now {
  font-size: 36rpx;
  font-weight: 700;
  color: #ff5a1a; /* 与主题橙统一 */
  line-height: 1;
}

.price-origin {
  font-size: 26rpx;
  color: #9f9f9f;
  text-decoration: line-through; /* 用样式处理中划线 */
}

/* 通用行（键值对） */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.row-left {
  font-size: 30rpx;
  color: #4a4a4a;
}

.row-right {
  font-size: 30rpx;
  color: #1f1f1f;
}

.accent {
  color: #ff5a1a;
  font-weight: 600;
}

/* 支付方式 */
.pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pay-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.pay-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 8rpx;
}

.pay-text {
  font-size: 30rpx;
  color: #333333;
}

.pay-right {
  display: flex;
  align-items: center;
}

/* 固定底部 */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  box-shadow: 0 -6rpx 20rpx rgba(0,0,0,0.06);
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容旧版 iOS */
  padding-bottom: constant(safe-area-inset-bottom);
}

.footer-inner {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.to-pay {
  font-size: 28rpx;
  color: #666666;
}

.to-pay-amount {
  font-size: 36rpx;
  color: #ff5a1a;
  font-weight: 700;
  margin-left: 8rpx;
}

/* 支付按钮：使用 view，自定义橙色主题 */
.btn-pay {
  min-width: 260rpx;
  height: 88rpx;
  border-radius: 999rpx;
  background: linear-gradient(180deg, #ffa64a 0%, #ff8d1a 100%);
  color: #ffffff;
  font-size: 30rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 14rpx rgba(255, 141, 26, 0.35);
  active-opacity: 0.85;
}

/* 遮罩层 */
.page-mask {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 9999;
}

/* 旧样式中可能用到的零散类，若无依赖可移除 */
.ml-11 { margin-left: 20rpx; }
.mt-15 { margin-top: 28rpx; }
.ml-1  { margin-left: 2rpx; }



/* 入口小字 */
.notice-entry {
  margin-right: 16rpx;
  font-size: 24rpx;
  color: #8a8a8a;
  text-decoration: underline;
}

/* 弹窗遮罩 */
.modal-mask {
  position: fixed;
  z-index: 999;              /* 确保在你的 .footer 与其他遮罩之上 */
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

/* 弹窗容器 */
.modal {
  width: 86%;
  max-width: 640rpx;
  max-height: 70vh;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.18);
}

/* 标题 */
.modal-title {
  padding: 28rpx 32rpx 12rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
}

/* 内容区滚动 */
.modal-body {
  max-height: 48vh;
  padding: 8rpx 32rpx 24rpx;
}

/* 富文本默认样式优化 */
.modal-body rich-text {
  display: block;
  font-size: 26rpx;
  line-height: 1.75;
  color: #444;
}
.modal-body h3 { font-size: 28rpx; margin: 18rpx 0 8rpx; color: #222; }
.modal-body p { margin: 10rpx 0; }
.modal-body ul, .modal-body ol { margin: 10rpx 0 10rpx 28rpx; }
.modal-body a { color: #1677ff; word-break: break-all; }

/* 底部按钮区 */
.modal-actions {
  padding: 20rpx 24rpx 28rpx;
}
.btn-primary {
  width: 100%;
  height: 84rpx;
  line-height: 84rpx;
  text-align: center;
  border-radius: 16rpx;
  background: #ff8a00;      /* 你的主色调（可换成项目变量） */
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
}
.btn-primary:active {
  opacity: 0.85;
}

.notice-icon {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 10;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  padding: 6rpx 14rpx;
}

.notice-icon-img {
  width: 34rpx;
  height: 34rpx;
  margin-right: 8rpx;
}

.notice-icon-text {
  font-size: 24rpx;
  color: #333;
}
.notice-icon:active {
  opacity: 0.85;
}