/* 轮播图指示器样式增强 - 高对比度版本 */
.carousel-indicators {
  /* 确保指示器位于正确的Z轴层级 */
  z-index: 20;
  /* 增加指示器容器的尺寸和间距 */
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
}

.carousel-indicators button {
  /* 从圆形改为胶囊形状，更具现代感 */
  border-radius: 9999px;
  /* 显著增加高度以提高可点击区域和视觉效果 */
  height: 12px;
  /* 禁用默认的按钮轮廓 */
  outline: none;
  /* 提高透明度变化的过渡时间 */
  transition: all 0.4s ease;
  /* 增加光标指针，提示可点击 */
  cursor: pointer;
  /* 添加阴影，增加立体感 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  /* 添加边框，增强视觉效果 */
  border: 2px solid transparent;
}

/* 非活动状态指示器 */
.carousel-indicators button:not([aria-current="true"]) {
  /* 降低不透明度，更明显地区别于活动状态 */
  opacity: 0.5;
  /* 更深的背景色，增加对比度 */
  background-color: rgba(255, 255, 255, 0.7) !important;
  /* 添加边框，增强轮廓 */
  border-color: rgba(255, 255, 255, 0.3);
}

.carousel-indicators button:not([aria-current="true"]):hover {
  /* 鼠标悬停时增加不透明度和放大效果 */
  opacity: 0.8;
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* 活动状态指示器 - 高对比度版本 */
.carousel-indicators button[aria-current="true"] {
  /* 确保活动指示器的视觉优先级 */
  opacity: 1;
  /* 显著增加尺寸差异 */
  width: 40px !important;
  height: 12px;
  /* 使用更鲜明的主色调 */
  background-color: #f59e0b !important; /* 使用更鲜艳的黄色 */
  /* 增加内发光效果，突出显示 */
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  /* 添加金色边框 */
  border-color: #fbbf24;
  /* 增加厚度，使其更加突出 */
  border-width: 2px;
  /* 置于顶层 */
  z-index: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 在移动设备上进一步增加指示器的尺寸和间距 */
  .carousel-indicators {
    gap: 0.75rem;
    padding: 10px 20px;
  }
  
  .carousel-indicators button {
    height: 14px;
  }
  
  /* 增加非活动和活动状态的尺寸差异 */
  .carousel-indicators button:not([aria-current="true"]) {
    width: 24px;
  }
  
  .carousel-indicators button[aria-current="true"] {
    width: 50px !important;
    height: 14px;
  }
}

@media (max-width: 480px) {
  /* 在小屏幕设备上进一步调整 */
  .carousel-indicators {
    gap: 0.5rem;
    padding: 8px 16px;
  }
  
  .carousel-indicators button {
    height: 16px;
  }
  
  .carousel-indicators button:not([aria-current="true"]) {
    width: 20px;
  }
  
  .carousel-indicators button[aria-current="true"] {
    width: 45px !important;
    height: 16px;
  }
}

/* 动画效果增强 - 更明显的脉冲 */
@keyframes pulse-indicator {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4);
  }
}

.carousel-indicators button[aria-current="true"] {
  /* 添加更明显的脉冲动画，吸引用户注意 */
  animation: pulse-indicator 1.5s infinite ease-in-out;
}

/* 幻灯片切换时的指示器动画 */
@keyframes switch-indicator {
  0% {
    opacity: 0.6;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.carousel-indicators button.switching {
  animation: switch-indicator 0.5s ease-out !important;
}

/* 无障碍支持：键盘焦点样式 */
.carousel-indicators button:focus-visible {
  outline: 4px solid rgba(245, 158, 11, 0.8);
  outline-offset: 3px;
  transform: scale(1.05);
}

/* 禁用状态样式 */
.carousel-indicators button:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  transform: none !important;
  animation: none !important;
}

/* 为幻灯片内容添加当前指示器 */
.banner-section .slide-content {
  position: relative;
}

/* 添加幻灯片计数指示器 */
.slide-counter {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  z-index: 20;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 响应式调整计数指示器 */
@media (max-width: 768px) {
  .slide-counter {
    top: 15px;
    right: 15px;
    padding: 6px 12px;
    font-size: 12px;
  }
}