/* pages/appointment/index.wxss */
.appointment-container {
  padding: 30rpx;
  padding-bottom: 130rpx !important; /* 为底部标签栏留出空间 */
  box-sizing: border-box !important;
}

.section {
  margin-bottom: 40rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
  color: #333;
}

/* 日期选择样式 */
.date-scroll {
  white-space: nowrap;
  width: 100%;
}

.date-list {
  display: flex;
  padding: 10rpx 0;
}

.date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
  background-color: #f8f8f8;
  transition: all 0.3s;
}

.date-item.active {
  background-color: #FF5F15;
  color: #fff;
}

.date-weekday {
  font-size: 24rpx;
  margin-bottom: 8rpx;
}

.date-day {
  font-size: 32rpx;
  font-weight: 500;
}

/* 时间选择样式 */
.time-list {
  display: flex;
  flex-wrap: wrap;
}

.time-item {
  width: 150rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  transition: all 0.3s;
}

.time-item.active {
  background-color: #FF5F15;
  color: #fff;
}

/* 服务选择样式 */
.service-list {
  display: flex;
  flex-direction: column;
}

.service-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  border-radius: 12rpx;
  background-color: #f8f8f8;
  margin-bottom: 20rpx;
  transition: all 0.3s;
}

.service-item.active {
  background-color: #FFF0E6;
  border: 2rpx solid #FF5F15;
}

.service-name {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.service-info {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  color: #666;
}

.service-price {
  color: #FF5F15;
  font-weight: 500;
}

/* 提交按钮样式 */
.submit-section {
  margin: 40rpx 0;
}

/* 预约列表样式 */
.appointment-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.appointment-service {
  font-size: 32rpx;
  font-weight: 500;
}

.appointment-status {
  font-size: 24rpx;
  color: #FF9500;
  background-color: #FFF5E5;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.appointment-status.confirmed {
  color: #07C160;
  background-color: #E8F8F0;
}

.appointment-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: #666;
}

.appointment-time {
  display: flex;
  align-items: center;
}

.appointment-time text {
  margin-left: 10rpx;
}

.appointment-price {
  font-size: 32rpx;
  color: #FF5F15;
  font-weight: 500;
}

.appointment-actions {
  display: flex;
  justify-content: flex-end;
}

/* 空状态样式 */
.empty-appointments {
  padding: 60rpx 0;
}