hms/apps/miniprogram/src/pages/appointment/create/index.scss

@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

.create-page {
  min-height: 100vh;
  background: $bg;
  padding-bottom: 160px;
}

/* 步骤内容 */
.step-content {
  padding: 32px 24px;
}

.step-title {
  @include section-title;
}

/* 科室宫格 */
.dept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.dept-card {
  background: $card;
  border-radius: $r;
  padding: 28px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  box-shadow: $shadow-sm;

  &.dept-selected {
    border-color: $pri;
    background: $pri-l;
  }
}

.dept-initial-circle {
  width: 64px;
  height: 64px;
  border-radius: $r;
  background: $pri-l;
  @include flex-center;

  .dept-selected & {
    background: $pri;
  }
}

.dept-initial-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 30px;
  font-weight: bold;
  color: $pri;

  .dept-selected & {
    color: white;
  }
}

.dept-label {
  font-size: 24px;
  color: $tx;
  font-weight: 500;
}

/* 时段 */
.slot-section {
  margin-top: 32px;
}

.slot-section-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 28px;
  font-weight: bold;
  color: $tx;
  margin-bottom: 16px;
  display: block;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.slot-card {
  background: $card;
  border-radius: $r-sm;
  padding: 20px 24px;
  border: 2px solid transparent;
  transition: all 0.2s;
  box-shadow: $shadow-sm;

  &.slot-few {
    border-color: $wrn;
  }
  &.slot-full {
    opacity: 0.5;
    background: $bd-l;
  }
  &.slot-selected {
    border-color: $pri;
    background: $pri-l;
  }
}

.slot-time {
  @include serif-number;
  font-size: 28px;
  font-weight: bold;
  color: $tx;
  display: block;
}

.slot-count {
  font-size: 22px;
  color: $tx3;
  display: block;
  margin-top: 6px;
}

.slot-few .slot-count { color: $wrn; }
.slot-full .slot-count { color: $dan; }

/* 确认卡片 (step 3 医生信息) */
.confirm-card {
  background: $card;
  border-radius: $r;
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: $shadow-sm;
}

.confirm-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.confirm-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: $r-sm;
  background: $pri-l;
  @include flex-center;
  flex-shrink: 0;
}

.confirm-icon-serif {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 24px;
  font-weight: bold;
  color: $pri;
}

.confirm-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.confirm-label {
  font-size: 22px;
  color: $tx3;
}

.confirm-value {
  font-size: 28px;
  font-weight: bold;
  color: $tx;
}

.confirm-dept-tag {
  @include tag($pri-l, $pri);
  flex-shrink: 0;
}

.confirm-dept-text {
  font-size: 20px;
  font-weight: 500;
  color: $pri;
}

/* 医生列表 */
.doctor-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doctor-card {
  background: $card;
  border-radius: $r;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: $shadow-sm;
  border: 2px solid transparent;
  transition: border-color 0.2s;

  &.doctor-selected {
    border-color: $pri;
    background: $pri-l;
  }
}

.doctor-avatar {
  width: 80px;
  height: 80px;
  border-radius: $r;
  background: $pri-l;
  @include flex-center;
  flex-shrink: 0;
}

.doctor-avatar-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 32px;
  color: $pri;
  font-weight: bold;
}

.doctor-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doctor-name {
  font-size: 30px;
  font-weight: bold;
  color: $tx;
}

.doctor-title {
  font-size: 24px;
  color: $tx2;
}

.doctor-specialty {
  font-size: 22px;
  color: $pri;
}

.doctor-check {
  width: 44px;
  height: 44px;
  border-radius: $r-pill;
  background: $pri;
  @include flex-center;
  flex-shrink: 0;
}

.doctor-check-text {
  font-size: 24px;
  color: white;
  font-weight: bold;
}

/* 表单 */
.form-group {
  margin-top: 32px;
}

.form-label {
  font-size: 26px;
  color: $tx2;
  margin-bottom: 12px;
  display: block;
}

.form-input {
  background: $card;
  border-radius: $r-sm;
  padding: 24px 28px;
  font-size: 28px;
  color: $tx;
  width: 100%;
  box-sizing: border-box;
  box-shadow: $shadow-sm;
}

/* 空状态 */
.empty-hint {
  padding: 80px 0;
  text-align: center;
}

.empty-text {
  font-size: 28px;
  color: $tx3;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background: $card;
  box-shadow: $shadow-md;
}

.btn {
  flex: 1;
  padding: 24px 0;
  border-radius: $r-sm;
  text-align: center;
  transition: opacity 0.2s;
}

.btn-prev {
  background: $bd-l;
}

.btn-next,
.btn-submit {
  background: $pri;
}

.btn-disabled {
  opacity: 0.5;
}

.btn-text {
  font-size: 30px;
  font-weight: bold;
  color: $tx2;
}

.btn-text-white {
  color: white;
}