wxapp_escort/pages/escort/itemdetail.wxss

/* pages/escort/itemdetail.wxss
   设计方向：本页是"服务说明书"，不是电商详情页。
   - 去掉了顶部 420rpx 大图：占位图在 8 条服务间复用，既无法区分服务，又抢走首屏
   - 结构重音只给一处：服务流程的时间轴橙色导轨（真序列，编号在此合法）
   - 配色锁定首页/清单页的暖白纸面 + 单一暖橙；实心橙只给两个提交按钮
   - 形状锁定：面板/卡片 28rpx、字段 12rpx、标签 10rpx、胶囊按钮 999rpx */
page {
  --brand-strong: #C2410C; /* 实心块/按钮：白字 4.69:1；纸面上的文字 5.0:1，均过 AA */
  --brand-soft: #FFF4E8;   /* 浅橙衬底 */
  --brand-line: #FFE0C2;   /* 浅橙衬底描边 */
  --brand-ink: #9A3412;    /* 浅橙衬底上的文字：6.8:1，过 AA */

  --ink: #2B2521;
  --ink-2: #4A4038;
  --muted: #6F655C;        /* 纸面 5.28:1 / 白卡 5.69:1，过 AA 正文 */
  --line: #ECE3D6;         /* 米色发丝边：纸面 1.20:1 / 白卡 1.27:1 */
  --paper: #FAF8F5;
  --white: #FFFFFF;

  --shadow-cta: 0 2rpx 8rpx rgba(194, 65, 12, 0.16);
  /* 纸面 1.05:1 / 发丝边 1.27:1 都托不住固定栏，补一道小偏移小模糊的上向阴影 */
  --shadow-bar: 0 -2rpx 8rpx rgba(63, 43, 25, 0.07);

  background-color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.page-bg {
  min-height: 100vh;
  background: var(--paper);
}

.container {
  padding: 0 32rpx calc(40rpx + env(safe-area-inset-bottom));
}

/* ===== 头部：短横色标 + 深墨标题 ===== */
.page-header {
  padding: 32rpx 0 0;
}

.header-accent {
  width: 64rpx;
  height: 8rpx;
  border-radius: 4rpx;
  background: var(--brand-strong);
}

.title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10rpx;
  column-gap: 16rpx;
  margin-top: 22rpx;
}

.header-title {
  font-size: 48rpx;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1rpx;
  line-height: 1.3;
}

/* 标签：浅橙衬底 + 暖陶土字，与首页/清单页同一口径 */
.header-tag {
  flex-shrink: 0;
  padding: 6rpx 18rpx;
  border-radius: 10rpx;
  background: var(--brand-soft);
  border: 2rpx solid var(--brand-line);
  color: var(--brand-ink);
  font-size: 22rpx;
  font-weight: 700;
  letter-spacing: 1rpx;
  white-space: nowrap;
}

.header-subtitle {
  display: block;
  margin-top: 12rpx;
  font-size: 28rpx;
  color: var(--muted);
  letter-spacing: 1rpx;
  line-height: 1.6;
}

/* ===== 通用区块：靠发丝线切分，不靠白卡浮起来 ===== */
.section {
  margin-top: 44rpx;
  padding-top: 30rpx;
  border-top: 2rpx solid var(--line);
}

.section-head {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

/* 区块标识：单竖条，与首页/清单页同规格 */
.section-bar {
  width: 8rpx;
  height: 34rpx;
  border-radius: 4rpx;
  background: var(--brand-strong);
  flex-shrink: 0;
}

.section-title {
  margin-left: 16rpx;
  font-size: 34rpx;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1rpx;
}

/* ===== 服务详情 ===== */
.detail-text {
  display: block;
  font-size: 28rpx;
  color: var(--ink-2);
  line-height: 1.85;
  letter-spacing: 0.5rpx;
}

/* ===== 服务流程：时间轴（本页唯一的结构性重音） ===== */
.step-list {
  display: flex;
  flex-direction: column;
}

.step {
  display: flex;
  align-items: flex-start;
}

/* 导轨需要撑满整步高度，连接线才能真的连到下一步 */
.step-rail {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44rpx;
  flex-shrink: 0;
}

.step-dot {
  width: 44rpx;
  height: 44rpx;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--brand-soft);
  border: 2rpx solid var(--brand-line);
  color: var(--brand-ink);
  font-size: 24rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 连接线：橙色导轨，用半透明暖橙而非实心，避免与圆点抢重音 */
.step-line {
  flex: 1;
  width: 2rpx;
  min-height: 16rpx;
  margin: 8rpx 0;
  background: rgba(194, 65, 12, 0.28);
}

.step-body {
  flex: 1;
  min-width: 0;
  margin-left: 20rpx;
  padding-bottom: 30rpx;
}

.step:last-child .step-body {
  padding-bottom: 0;
}

.step-title {
  display: block;
  font-size: 30rpx;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

.step-desc {
  display: block;
  margin-top: 8rpx;
  font-size: 26rpx;
  color: var(--muted);
  line-height: 1.6;
}

/* ===== 注意事项：与指南页同一套圆点语言 ===== */
.dot-list {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}

.dot-item {
  display: flex;
  align-items: flex-start;
}

.dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: var(--brand-strong);
  margin-top: 14rpx;
  flex-shrink: 0;
}

.dot-text {
  flex: 1;
  min-width: 0;
  margin-left: 16rpx;
  font-size: 28rpx;
  color: var(--ink-2);
  line-height: 1.65;
}

/* ===== 底部占位 + 下单栏 ===== */
.bottom-placeholder {
  height: 150rpx;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 2rpx solid var(--line);
  box-shadow: var(--shadow-bar);
  z-index: 100;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.total-label {
  margin-right: 8rpx;
  font-size: 26rpx;
  color: var(--muted);
  letter-spacing: 1rpx;
}

.price-sym {
  font-size: 28rpx;
  font-weight: 700;
  color: var(--brand-strong);
}

.total-price {
  margin-left: 2rpx;
  font-size: 44rpx;
  font-weight: 700;
  color: var(--brand-strong);
}

/* 主操作：实心暖橙胶囊，与首页/清单页 CTA 同形。
   内边距把高度撑到约 86rpx(43pt)，贴近 iOS 44pt 触控目标 */
.order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 22rpx 52rpx;
  border: none;
  border-radius: 999rpx;
  background: var(--brand-strong);
  box-shadow: var(--shadow-cta);
  color: var(--white);
  font-size: 30rpx;
  font-weight: 700;
  letter-spacing: 2rpx;
  line-height: 1.4;
  transition: transform 0.15s ease;
}

.order-btn::after {
  border: none;
}

.order-btn:active {
  transform: scale(0.98);
}

/* ===== 下单弹窗 ===== */
/* 遮罩用暖近黑而非纯黑，避免和暖色纸面打架 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(43, 37, 33, 0.45);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.popup-mask.show {
  opacity: 1;
  visibility: visible;
}

.popup-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  background: var(--white);
  border-radius: 32rpx 32rpx 0 0;
  z-index: 201;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.popup-content.show {
  transform: translateY(0);
}

.popup-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 32rpx;
  border-bottom: 2rpx solid var(--line);
  flex-shrink: 0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1rpx;
}

/* 用 padding 撑热区到约 64rpx，再用更小的 right 抵消，图标视觉位置不变 */
.popup-close {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 12rpx;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  max-height: 60vh;
  width: auto;
  padding: 28rpx 32rpx;
}

/* 弹窗内服务信息：浅橙衬底块，与页面的重点面板语言一致 */
.order-service-info {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  margin-bottom: 8rpx;
  border-radius: 20rpx;
  background: var(--brand-soft);
  border: 2rpx solid var(--brand-line);
}

.order-service-image {
  width: 96rpx;
  height: 96rpx;
  border-radius: 14rpx;
  flex-shrink: 0;
  background: var(--white);
}

.order-service-text {
  flex: 1;
  min-width: 0;
  margin-left: 20rpx;
}

.order-service-title {
  display: block;
  font-size: 30rpx;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

.order-service-price {
  display: block;
  margin-top: 8rpx;
  font-size: 28rpx;
  font-weight: 700;
  color: var(--brand-ink);
}

/* ===== 表单行 ===== */
/* 上下各 24rpx 内边距，行高约 87rpx，贴近 iOS 44pt 触控目标 */
.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 2rpx solid var(--line);
}

.order-row:last-child {
  border-bottom: none;
}

.order-row.column {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.order-label {
  flex-shrink: 0;
  font-size: 28rpx;
  color: var(--muted);
  letter-spacing: 1rpx;
}

.order-input {
  flex: 1;
  min-width: 0;
  margin-left: 24rpx;
  text-align: right;
  font-size: 28rpx;
  font-weight: 700;
  color: var(--ink);
}

.input-placeholder {
  color: var(--muted);
  font-weight: 400;
}

/* 只读值（就诊人姓名/电话）：与 .order-input 同形，仅去掉输入框语义 */
.order-value {
  flex: 1;
  min-width: 0;
  margin-left: 24rpx;
  text-align: right;
  font-size: 28rpx;
  font-weight: 700;
  color: var(--ink);
}

.order-value.placeholder {
  color: var(--muted);
  font-weight: 400;
}

/* picker 需要占满剩余宽度，值才能靠右对齐 */
.order-picker {
  flex: 1;
  min-width: 0;
  margin-left: 24rpx;
}

.picker-value {
  display: block;
  text-align: right;
  font-size: 28rpx;
  font-weight: 700;
  color: var(--ink);
}

.picker-value.placeholder {
  color: var(--muted);
  font-weight: 400;
}

/* 备注文本域：字段用暖白纸面填充 + 发丝边，与白底弹窗拉开一层 */
.order-textarea {
  width: 100%;
  height: 160rpx;
  box-sizing: border-box;
  margin-top: 16rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  background: var(--paper);
  border: 2rpx solid var(--line);
  font-size: 28rpx;
  color: var(--ink);
  line-height: 1.5;
}

.textarea-count {
  align-self: flex-end;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: var(--muted);
}

/* ===== 就诊人选择 ===== */
.patient-scroll {
  width: 100%;
  margin-top: 16rpx;
  white-space: nowrap;
}

.patient-chips {
  display: inline-flex;
  gap: 16rpx;
}

.patient-chip {
  display: inline-flex;
  flex-direction: column;
  min-width: 180rpx;
  padding: 16rpx 24rpx;
  border-radius: 16rpx;
  background: var(--paper);
  border: 2rpx solid var(--line);
  box-sizing: border-box;
  transition: opacity 0.15s ease;
}

.patient-chip:active {
  opacity: 0.7;
}

/* 选中态：浅橙衬底 + 实心橙描边（--brand-line 在浅橙底上只有 1.16:1，看不见） */
.patient-chip.active {
  background: var(--brand-soft);
  border-color: var(--brand-strong);
}

.patient-chip-name {
  font-size: 26rpx;
  font-weight: 700;
  color: var(--ink-2);
}

.patient-chip.active .patient-chip-name {
  color: var(--brand-ink);
}

.patient-chip-phone {
  margin-top: 6rpx;
  font-size: 22rpx;
  color: var(--muted);
}

.patient-chip-add {
  justify-content: center;
}

.patient-chip-add .patient-chip-name {
  color: var(--brand-ink);
}

/* 空态：整块可点，热区约 92rpx */
.add-profile-tip {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 16rpx;
  padding: 22rpx 24rpx;
  border-radius: 16rpx;
  background: var(--brand-soft);
  border: 2rpx solid var(--brand-line);
  box-sizing: border-box;
  transition: opacity 0.15s ease;
}

.add-profile-tip:active {
  opacity: 0.7;
}

.add-profile-tip-text {
  flex: 1;
  min-width: 0;
  margin-right: 8rpx;
  font-size: 24rpx;
  font-weight: 700;
  color: var(--brand-ink);
}

/* ===== 弹窗底部 ===== */
.popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 2rpx solid var(--line);
  background: var(--white);
  flex-shrink: 0;
}

.popup-price {
  display: flex;
  align-items: baseline;
}

.popup-price-label {
  margin-right: 8rpx;
  font-size: 26rpx;
  color: var(--muted);
  letter-spacing: 1rpx;
}

.popup-price-value {
  margin-left: 2rpx;
  font-size: 44rpx;
  font-weight: 700;
  color: var(--brand-strong);
}

.popup-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 22rpx 48rpx;
  border: none;
  border-radius: 999rpx;
  background: var(--brand-strong);
  box-shadow: var(--shadow-cta);
  color: var(--white);
  font-size: 30rpx;
  font-weight: 700;
  letter-spacing: 2rpx;
  line-height: 1.4;
  transition: transform 0.15s ease;
}

.popup-submit-btn::after {
  border: none;
}

.popup-submit-btn:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .popup-content,
  .popup-mask {
    transition: none;
  }
}