/* pages/escort/recorddetail.wxss
   设计方向：本页是一张陪诊订单的详情，按「状态 → 就诊人 → 医院 → 服务 → 需求 → 费用 → 订单」的顺序铺开。
   - 配色并入全站暖橙体系（doc/DESIGN.md）：令牌来自 app.wxss，本页不再留副本；
     状态色只用 §三 四档，旧版渐变横幅与金色体系全部移除
   - 头部：短横色标 + 状态胶囊 + 状态说明（内页规范，不做整块主色面板）
   - 分区：发丝线切分，标题走统一的 8×34rpx 单竖条 .section-bar
   - 表单：标签 --muted + 值 --ink 700；选中项走浅橙底 + 实心橙描边
   - 按钮：底栏主操作实心胶囊，其余为空心胶囊；同类实心块全页只保留一处（§2.1）
   - 字号阶梯：34 分节标题 / 28 正文 · 表单 / 26 标签 / 24 元信息，最小 24rpx(12px) */
page {
  background-color: var(--paper);

  /* 底栏上向阴影：小偏移、小模糊，令牌不在全局色板内，故本页登记 */
  --shadow-bar: 0 -2rpx 8rpx rgba(63, 43, 25, 0.06);
}

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

.container {
  padding: 0 32rpx 40rpx;
}

/* ===== 头部状态 ===== */
.page-header {
  padding-top: 32rpx;
}

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

.status-row {
  margin-top: 22rpx;
}

/* 状态胶囊：底色 + 描边 + 字色三件套，颜色只做强化，文字才是信息（§三） */
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 6rpx 18rpx;
  border: 2rpx solid transparent;
  border-radius: 12rpx;
  font-size: 24rpx;
  font-weight: 700;
  letter-spacing: 1rpx;
  line-height: 1.4;
  white-space: nowrap;
}

.status-chip-lg {
  padding: 8rpx 22rpx;
  font-size: 28rpx;
}

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

/* ===== 分区：发丝线 + 单竖条标题 ===== */
.section {
  margin-top: 44rpx;
  padding-top: 30rpx;
  border-top: 2rpx solid var(--line);
}

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

.section-bar {
  flex-shrink: 0;
  width: 8rpx;
  height: 34rpx;
  border-radius: 4rpx;
  background: var(--brand-strong);
}

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

/* 区块右侧入口：用 padding 撑热区、负 margin 抵消，保持标题行高度 */
.section-link {
  display: flex;
  align-items: center;
  margin: -16rpx 0 -16rpx auto;
  padding: 16rpx 0 16rpx 24rpx;
}

.section-link:active {
  opacity: 0.6;
}

.section-link-text {
  margin-right: 4rpx;
  font-size: 24rpx;
  color: var(--brand-ink);
}

/* ===== 信息行（只读） ===== */
.info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18rpx 0;
  border-bottom: 2rpx solid var(--line);
}

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

.info-label {
  flex-shrink: 0;
  font-size: 26rpx;
  color: var(--muted);
}

.info-value {
  flex: 1;
  min-width: 0;
  margin-left: 24rpx;
  text-align: right;
  font-size: 28rpx;
  color: var(--ink-2);
  word-break: break-all;
}

.info-link {
  color: var(--brand-ink);
  font-weight: 700;
}

.fee-value {
  color: var(--brand-strong);
  font-weight: 700;
}

.order-id {
  font-size: 24rpx;
  color: var(--muted);
  letter-spacing: 1rpx;
}

/* ===== 表单行（编辑态） ===== */
.edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 2rpx solid var(--line);
}

.edit-label {
  flex-shrink: 0;
  font-size: 28rpx;
  color: var(--muted);
}

.edit-picker {
  flex: 1;
  min-width: 0;
  margin-left: 24rpx;
}

/* 选择器内层已由 .edit-picker 让出间距，内层值不再重复缩进 */
.edit-picker .edit-input {
  margin-left: 0;
}

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

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

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

.edit-radio-group {
  display: flex;
  gap: 16rpx;
}

/* 选中项：浅橙底 + 实心橙描边（表单选中语言） */
.edit-radio {
  padding: 8rpx 28rpx;
  border: 2rpx solid var(--line);
  border-radius: 999rpx;
  font-size: 26rpx;
  color: var(--muted);
  background: transparent;
}

.edit-radio.active {
  background: var(--brand-soft);
  border-color: var(--brand-strong);
  color: var(--brand-ink);
  font-weight: 700;
}

/* ===== 按键：空心胶囊 / 实心胶囊 ===== */
.edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
  margin-top: 28rpx;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 44rpx;
  border-radius: 999rpx;
  font-size: 28rpx;
  line-height: 1.4;
}

.btn:active {
  opacity: 0.7;
}

.btn-ghost {
  border: 3rpx solid var(--sep);
  color: var(--muted);
  background: transparent;
}

.btn-primary {
  background: var(--brand-strong);
  color: var(--white);
  font-weight: 700;
  box-shadow: var(--shadow-cta);
}

/* ===== 备注 ===== */
.note-block {
  margin-top: 18rpx;
}

.note-block:first-child {
  margin-top: 6rpx;
}

.note-label {
  display: block;
  margin-bottom: 6rpx;
  font-size: 24rpx;
  color: var(--muted);
}

.note-text {
  display: block;
  font-size: 28rpx;
  color: var(--ink-2);
  line-height: 1.7;
  letter-spacing: 1rpx;
}

.note-empty {
  margin-top: 6rpx;
  padding: 24rpx 0;
}

.note-empty-text {
  font-size: 28rpx;
  color: var(--muted);
}

.note-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 200rpx;
  margin-top: 6rpx;
  padding: 24rpx;
  border: 2rpx solid var(--line);
  border-radius: 16rpx;
  background: var(--paper);
  font-size: 28rpx;
  color: var(--ink-2);
  line-height: 1.7;
}

/* ===== 底部占位与操作栏 ===== */
.bottom-placeholder {
  height: 160rpx;
}

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

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18rpx 44rpx;
  border-radius: 999rpx;
  font-size: 30rpx;
  line-height: 1.4;
}

.action-btn:active {
  opacity: 0.7;
}

.action-ghost {
  border: 3rpx solid var(--sep);
  color: var(--muted);
  background: transparent;
}

.action-primary {
  background: var(--brand-strong);
  color: var(--white);
  font-weight: 700;
  box-shadow: var(--shadow-cta);
}

/* ===== 取消订单弹窗 ===== */
.popup-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(43, 37, 33, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

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

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

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 32rpx;
  border-bottom: 2rpx solid var(--line);
}

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

.popup-close {
  padding: 8rpx;
  margin: -8rpx;
}

.popup-close:active {
  opacity: 0.5;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 28rpx 32rpx;
}

.cancel-tip {
  font-size: 28rpx;
  color: var(--muted);
  line-height: 1.6;
}

.cancel-reason-list {
  display: flex;
  flex-direction: column;
  margin-top: 8rpx;
}

.cancel-reason-item {
  display: flex;
  align-items: center;
  padding: 20rpx 16rpx;
  border-radius: 16rpx;
  transition: background-color 0.15s ease;
}

.cancel-reason-item.active {
  background: var(--brand-soft);
}

.reason-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 36rpx;
  height: 36rpx;
  border: 3rpx solid var(--sep);
  border-radius: 50%;
}

.cancel-reason-item.active .reason-radio {
  border-color: var(--brand-strong);
}

.reason-radio-inner {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background: var(--brand-strong);
}

.reason-text {
  margin-left: 16rpx;
  font-size: 28rpx;
  color: var(--ink-2);
}

.popup-footer {
  display: flex;
  gap: 16rpx;
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 2rpx solid var(--line);
}

.popup-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22rpx 0;
  border-radius: 999rpx;
  font-size: 30rpx;
  line-height: 1.4;
}

.popup-btn:active {
  opacity: 0.7;
}

.popup-btn-ghost {
  border: 3rpx solid var(--sep);
  color: var(--muted);
}

.popup-btn-primary {
  background: var(--brand-strong);
  color: var(--white);
  font-weight: 700;
}