ht80/sheji(1)/pages/ai-plan/ai-plan.wxss

/* pages/ai-plan/ai-plan.wxss */
.ai-plan-page {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.nav-header {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin: 0 auto;
}

.progress-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
}

.step-number {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: #ddd;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.step.active .step-number {
  background-color: #e54d42;
  color: white;
}

.step-text {
  font-size: 24rpx;
  color: #999;
}

.step.active .step-text {
  color: #e54d42;
}

.step-line {
  flex: 1;
  height: 4rpx;
  background-color: #ddd;
  margin: 0 10rpx;
}

.step-line.active {
  background-color: #e54d42;
}

.step-container {
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}


/* 天数选择器样式  */
.city-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 20rpx;
}

/* .day-option规则 */
.city-option {
  padding: 16rpx 30rpx;
  border-radius: 30rpx;
  background-color: #f5f5f5;
  color: #666;
  font-size: 28rpx;
  transition: all 0.3s;
  display: inline-block; /* 新增 */
  margin: 5rpx; /* 新增 */
}

/* 使用更具体的父级选择器 */
.city-selector .city-option.selected {
  background-color: #e54d42 !important;
  color: white !important;
}

/* 天数选择器样式  */
.day-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 20rpx;
}

/* .day-option规则 */
.day-option {
  padding: 16rpx 22rpx;
  border-radius: 30rpx;
  background-color: #f5f5f5;
  color: #666;
  font-size: 28rpx;
  transition: all 0.3s;
  display: inline-block; /* 新增 */
  margin: 5rpx; /* 新增 */
}

/* 使用更具体的父级选择器 */
.day-selector .day-option.selected {
  background-color: #e54d42 !important;
  color: white !important;
}

/* 出行方式选项样式 */
.transport-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.transport-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140rpx;
  padding: 20rpx 0;
  border-radius: 12rpx;
  background-color: #f5f5f5;
}

.transport-option.selected {
  background-color: #fdecec;
  border: 1px solid #e54d42;
}

.transport-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.custom-input {
  width: 100%;
  height: 160rpx;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 12rpx;
  background-color: #f9f9f9;
  font-size: 26rpx;
}

.next-btn {
  background-color: #e54d42;
  color: white;
  margin-top: 40rpx;
}

.generating-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.loading-gif {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.generating-text {
  font-size: 32rpx;
  color: #e54d42;
  margin-bottom: 15rpx;
  font-weight: bold;
}

.generating-tip {
  font-size: 26rpx;
  color: #999;
}



/* 步骤2: 行程生成  */
.step-container {
  padding: 20rpx;
  background-color: #f8f8f8;
}

/* 加载状态 */
.generating-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.loading-gif {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.generating-text {
  font-size: 32rpx;
  color: #e54d42;
  margin-bottom: 15rpx;
  font-weight: bold;
}

.generating-tip {
  font-size: 26rpx;
  color: #999;
}

/* 行程结果容器 */
.plan-result {
  padding-bottom: 40rpx;
}

/* 行程概览 */
.plan-overview {
  background: linear-gradient(to bottom, #fff, #fff9f9);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(229,77,66,0.08);
  border: 1rpx solid #ffecec;
}

.plan-header {
  margin-bottom: 20rpx;
  text-align: center;
}

.plan-title {
  font-size: 38rpx;
  font-weight: bold;
  color: #e54d42;
  display: block;
  margin-bottom: 10rpx;
}

.plan-subtitle {
  font-size: 28rpx;
  color: #666;
}

.plan-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 25rpx 0;
}

.meta-item {
  display: flex;
  align-items: center;
  margin: 15rpx 30rpx;
  font-size: 26rpx;
  color: #666;
  background: #f5f5f5;
  padding: 12rpx 20rpx;
  border-radius: 30rpx;
}

.meta-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.plan-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  text-align: center;
  padding: 0 20rpx;
}

/* 红色教育要点 */
.education-highlights {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  border: 1rpx solid #ffecec;
}

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

.section-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #e54d42;
}

.highlight-scroll {
  white-space: nowrap;
  width: 100%;
  padding: 10rpx 0;
}

.highlight-item {
  display: inline-flex;
  align-items: center;
  background: #fff5f5;
  border-radius: 40rpx;
  padding: 12rpx 24rpx;
  margin-right: 20rpx;
  border: 1rpx solid #ffdbdb;
}

.highlight-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

/* 红色旅游提示 */
.red-tips {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  border: 1rpx solid #ffecec;
}

.tips-content {
  padding-left: 10rpx;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  background: #fff9f9;
  padding: 15rpx;
  border-radius: 8rpx;
}

.tip-icon {
  width: 14rpx;
  height: 14rpx;
  margin-right: 15rpx;
  margin-top: 12rpx;
  background-color: #e54d42;
  border-radius: 50%;
}

/* 每日行程 */
.daily-plans {
  margin-bottom: 40rpx;
}

.day-plan {
  background: #fff;
  border-radius: 16rpx;
  padding: 0;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

/* 每日标题 */
.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  background: linear-gradient(to right, #e54d42, #ff7b74);
  color: white;
}

.day-title {
  font-size: 32rpx;
  font-weight: bold;
  color: white;
}

.day-transport {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: rgba(255,255,255,0.9);
}

.transport-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
  filter: brightness(0) invert(1);
}


/* 景点卡片 */
.attraction-card {
  margin-bottom: 0;
}

.red-card {
  border-left: 6rpx solid #e54d42;
  background: linear-gradient(to right, #fff9f9, #fff);
}

.card-image {
  width: 100%;
  height: 350rpx;
  display: block;
}

.card-content {
  padding: 25rpx;
}

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

.card-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.card-tags {
  display: flex;
  align-items: center;
}

.red-tag {
  background: #e54d42;
  color: #fff;
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  margin-right: 10rpx;
}

.time-tag {
  font-size: 24rpx;
  color: #999;
  background: #f0f0f0;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
}

.card-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15rpx;
}

/* 红色景点专属内容 */
.red-content {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx dashed #ffc4c4;
}

.history-point,
.learning-point {
  margin-bottom: 15rpx;
  background: #fff5f5;
  padding: 15rpx;
  border-radius: 8rpx;
}

.point-title {
  font-weight: bold;
  color: #e54d42;
  margin-right: 10rpx;
}

/* 实用信息 */
.practical-info {
  margin-top: 25rpx;
  padding-top: 20rpx;
  border-top: 1rpx dashed #eee;
}

.info-row {
  display: flex;
  margin-bottom: 15rpx;
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
  margin-right: 30rpx;
  margin-bottom: 10rpx;
  background: #f5f5f5;
  padding: 8rpx 15rpx;
  border-radius: 30rpx;
}

.info-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}

/* 交通信息 */
.transport-info {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8rpx;
  padding: 15rpx 20rpx;
  margin-top: 20rpx;
}

.transport-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.transport-duration {
  margin-left: auto;
  color: #999;
  font-size: 26rpx;
}

/* 当日总结 */
.day-summary {
  margin-top: 30rpx;
  padding: 25rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
  border-left: 6rpx solid #e54d42;
}

.summary-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.summary-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
}

.summary-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #e54d42;
}

.summary-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 行程总结 */
.plan-summary {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  text-align: center;
  border: 1rpx solid #ffecec;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-top: 25rpx;
}

.stat-item {
  text-align: center;
  background: #fff5f5;
  padding: 20rpx;
  border-radius: 12rpx;
}

.stat-value {
  display: block;
  font-size: 42rpx;
  font-weight: bold;
  color: #e54d42;
  margin-bottom: 5rpx;
}

.stat-label {
  font-size: 26rpx;
  color: #666;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  padding: 0 20rpx;
}

.action-buttons button {
  flex: 1;
  margin: 0 10rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.save-btn {
  background: #e54d42;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(229,77,66,0.3);
}

.save-btn:active {
  background: #d04339;
  transform: translateY(2rpx);
}

.regenerate-btn {
  background: #fff;
  color: #e54d42;
  border: 1rpx solid #e54d42;
}

.regenerate-btn:active {
  background: #fff5f5;
}

.share-btn {
  background: #fff;
  color: #666;
  border: 1rpx solid #ddd;
}

.share-btn:active {
  background: #f5f5f5;
}

.btn-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons button {
    margin: 10rpx 0;
    width: 100%;
  }
}

/* 参观须知整体容器 */
.detail-section {
  margin-top: 30rpx;
  padding-top: 30rpx;
  border-top: 1rpx dashed #ffdbdb;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #e54d42;
  margin-bottom: 20rpx;
  display: block;
}

/* 须知列表容器 */
.etiquette-list {
  background: #fff9f9;
  border-radius: 12rpx;
  padding: 20rpx;
}

/* 单个须知条目 */
.etiquette-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 红色圆点图标样式 */
.etiquette-icon {
  width: 16rpx;
  height: 16rpx;
  margin-right: 16rpx;
  margin-top: 14rpx; /* 与文字基线对齐 */
  flex-shrink: 0;
  background-color: #e54d42; /* 备用颜色，如果图片加载失败 */
  border-radius: 50%;
}

/* 文字内容 */
.etiquette-text {
  flex: 1;
}

/* 地图容器样式 */
.map-section {
  background: #fff;
  border-radius: 16rpx;
  margin: 20rpx 0;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

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

.section-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #e54d42;
}
.day-tabs {
  white-space: nowrap;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
}

.day-tab {
  display: inline-block;
  padding: 12rpx 24rpx;
  margin-right: 20rpx;
  border-radius: 30rpx;
  background: #f5f5f5;
  color: #666;
  font-size: 26rpx;
}

.day-tab.active {
  background: #e54d42;
  color: white;
}

.map-controls {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.control-btn {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  margin-bottom: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.control-icon {
  width: 30rpx;
  height: 30rpx;
}
.map-legend {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 0 20rpx 15rpx;
  font-size: 24rpx;
  color: #666;
}

.legend-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

/* 路线图例（覆盖层） */
cover-view.map-legend {
  position: absolute;
  left: 20rpx;
  bottom: 30rpx;
  background: rgba(255,255,255,0.8);
  padding: 15rpx;
  border-radius: 8rpx;
}

cover-view.legend-item {
  margin-bottom: 10rpx;
}

.legend-color {
  width: 20rpx;
  height: 20rpx;
  border-radius: 4rpx;
  margin-right: 10rpx;
  display: inline-block;
}
.map-container {
  position: relative;
  width: 100%;
  height: 500rpx;
  border-radius: 12rpx;
  overflow: hidden;
}

/* 适配不同屏幕尺寸 */
@media (max-width: 375px) {
  .map-container {
    height: 450rpx;
  }
}
.notice-container {
  background: #fff9f9;
  border-radius: 12rpx;
  padding: 20rpx;
  margin: 20rpx 0;
  border-left: 6rpx solid #e54d42;
}

.notice-item {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
  font-size: 26rpx;
  color: #666;
}

.notice-icon {
  flex-shrink: 0;
  width: 12rpx !important;
  height: 12rpx !important;
  margin-top: 8rpx;
  margin-right: 12rpx;
}

.notice-text {
  flex: 1;
  font-size: 26rpx;
  color: #666;
  word-break: break-word;
}

.red-circle {
  width: 24rpx;
  height: 24rpx;
  background: #e54d42;
  border-radius: 50%;
  margin-right: 15rpx;
  flex-shrink: 0;
}

.nav-btn {
  background: #000;
  color: white;
  border-radius: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  margin-top: 30rpx;
}

/* 路线规划展示样式 */
.route-plan-section {
  margin: 20px 0;
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.day-routes {
  margin-top: 15px;
}

.day-route {
  margin-bottom: 25px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 15px;
}

.day-route:last-child {
  border-bottom: none;
}

.route-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.route-day-tag {
  color: white;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 10px;
}

.route-theme {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.route-steps {
  margin-left: 15px;
  border-left: 2px solid #eee;
  padding-left: 20px;
}

.route-step {
  display: flex;
  margin-bottom: 15px;
  position: relative;
}

.step-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
  flex-shrink: 0;
  position: absolute;
  left: -33px;
  top: 0;
}

.step-content {
  flex: 1;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 10px;
}

.step-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.step-info {
  display: flex;
  margin-bottom: 5px;
}

.step-time {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.step-duration {
  font-size: 12px;
  color: #666;
}

.step-address {
  font-size: 12px;
  color: #999;
  display: block;
}

.route-summary {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  padding: 10px;
  background: #fef6f6;
  border-radius: 8px;
}

.summary-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  margin-top: 2px;
}

.summary-text {
  font-size: 14px;
  color: #666;
  flex: 1;
}


/* 步骤3: 完成页面样式 */
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
  text-align: center;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.success-icon {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 30rpx;
}

.success-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #e54d42;
  margin-bottom: 15rpx;
}

.success-subtitle {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 50rpx;
}

.success-actions {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 40rpx;
}

.view-plan-btn, .share-plan-btn {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 45rpx;
  margin: 0 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.view-plan-btn {
  background: #e54d42;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(229,77,66,0.3);
}

.view-plan-btn:active {
  background: #d04339;
  transform: translateY(2rpx);
}

.share-plan-btn {
  background: #fff;
  color: #e54d42;
  border: 1rpx solid #e54d42;
}

.share-plan-btn:active {
  background: #fff5f5;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .success-actions {
    flex-direction: column;
  }
  
  .view-plan-btn, .share-plan-btn {
    margin: 10rpx 0;
    width: 100%;
  }
}



/* 景点详情弹窗样式 */
.attraction-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* 主内容卡片 */
.modal-container {
  width: 100%;
  height: 80vh;
  max-height: 80vh;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部图片容器 - 全屏宽度 */
.image-container {
  width: 100%;
  height: 420rpx;
  position: relative;
  overflow: hidden;
}

/* 图片样式 - 充满全屏 */
.attraction-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 关闭按钮 - 悬浮在图片上 */
.close-btn {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.close-icon {
  width: 50rpx;
  height: 50rpx;
}

/* 交互效果 */
.close-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.8);
}

/* 确保图片容器层级正确 */
.image-container {
  position: relative;
  z-index: 1;
}
/* 加载状态 */
.image-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(245, 245, 245, 0.8);
}

.image-loading image {
  width: 50px;
  height: 50px;
}

/* 错误状态 */
.image-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(245, 245, 245, 0.8);
  color: #999;
}

.image-error image {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

/* 隐藏错误图片 */
.attraction-image.hidden {
  opacity: 0;
}


/* 可滚动内容区域 */
.modal-body {
  flex: 1;
  padding: 32rpx;
  padding-bottom: 180rpx;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* 自定义滚动条样式 */
.modal-body::-webkit-scrollbar {
  width: 6rpx;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6rpx;
}

/* 景点标题 */
.attraction-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

/* 开放时间标签 */
.time-tag {
  display: inline-flex;
  align-items: center;
  background: #f5f5f5;
  color: #666;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  margin-bottom: 24rpx;
}

/* 评分和距离信息 */
.attraction-meta {
  display: flex;
  justify-content: space-between;
  margin: 24rpx 0;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
}

.meta-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.meta-icon {
  width: 32rpx;
  height: 32rpx;
  margin-bottom: 8rpx;
}

/* 红色评分 */
.score {
  color: #e54d42;
  font-weight: bold;
}

/* 信息区块 */
.section {
  margin: 32rpx 0;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.section-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.section-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 地址和门票信息 */
.info-grid {
  background: #f9f9f9;
  border-radius: 12rpx;
  padding: 24rpx;
  margin: 32rpx 0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
}

/* 免费标签 */
.free-tag {
  color: #e54d42;
  font-weight: bold;
}

/* 底部按钮区域 */
.modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 32rpx;
  display: flex;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.modal-footer button {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  border-radius: 40rpx;
  margin: 0 10rpx;
}

/* 收藏按钮 */
.favorite-btn {
  background: #fff;
  color: #333;
  border: 1rpx solid #ddd;
}

/* 导航按钮 */
.navigate-btn {
  background: #e54d42;
  color: #fff;
  border: none;
}

/* 按钮图标 */
.btn-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}