/* 滑动区域样式 */
.main-slider-container {
  position: relative;
  width: 100%;
  margin: 0px 0;
  overflow: hidden;
  background-color: transparent; /* 确保背景透明 */
  /* 移除公告栏后，主内容区域可以充分利用垂直空间 */
  min-height: 100vh; /* 确保至少占满整个视窗高度 */
}

.slider-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  position: relative;
  z-index: 10;
  gap: 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 40px;
}

.slider-nav-btn {
  background: #f8f8f8;
  border: none;
  padding: 0 15px;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-weight: 500;
  color: #666;
  flex: 1;
  text-align: center;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  line-height: 44px;
  pointer-events: none;
}

.slider-nav-btn:last-child {
  border-right: none;
}

.slider-nav-btn:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.3s ease;
}

.slider-nav-btn.active {
  color: #6c5ce7;
  font-weight: 600;
  background: #fff;
  transform: none;
  box-shadow: none;
}

.slider-nav-btn.active:before {
  background: #6c5ce7;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: transparent; /* 确保背景透明 */
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease-out;
  width: 300%; /* 3 sections */
  background-color: transparent; /* 确保背景透明 */
}

.slider-section {
  width: calc(100% / 3);
  flex-shrink: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  padding: 0; /* 移除原来的padding: 0 20px，让内容自己控制居中 */
  background-color: transparent !important; /* 强制移除背景色 */
  position: relative;
}

/* 只对非工具区域的section应用白雾效果 */
.slider-section:not(.tools-section) {
  opacity: 0.6;
  transform: scale(0.85);
}

/* 工具区域始终保持清晰 */
.slider-section.tools-section {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.slider-section.active {
  opacity: 1;
  transform: scale(1);
  background-color: transparent !important; /* 强制移除背景色 */
}

/* 非激活状态的section */
.slider-section:not(.active) {
  /* 保留交互能力 */
}

/* 为每个section内部的container添加统一的居中样式 */
.slider-section .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 模型说明区域的特定样式 */
.models-section {
  background-color: rgba(249, 249, 249, 0.3); /* 使用更轻的背景 */
  border-radius: 15px;
  padding: 0; /* 统一改为0 */
}

/* 价格说明区域的特定样式 */
.pricing-section {
  background-color: rgba(255, 255, 255, 0.3); /* 使用更轻的背景 */
  border-radius: 15px;
  padding: 0; /* 统一改为0 */
}

/* 工具展示区域的特定样式 */
.tools-section {
  background-color: rgba(249, 249, 249, 0.3) !important; /* 使用更轻的背景 */
  border-radius: 15px;
  padding: 0 !important; /* 完全移除padding */
}

/* 覆盖sections.css中的tools样式 */
.slider-section .tools {
  padding: 0 !important; /* 强制覆盖 */
  background-color: transparent !important; /* 强制移除背景色 */
}

/* 调整工具区域的header间距 */
.slider-section .tools-header {
  margin-bottom: 15px !important; /* 强制覆盖 */
  padding-top: 0 !important;
}

/* 调整工具说明文字的间距 */
.slider-section .tools-instruction {
  margin-top: 10px !important; /* 减少顶部间距 */
  margin-bottom: 15px !important;
}

/* 确保工具网格不会被遮挡 */
.slider-section .tools-grid {
  background-color: transparent !important;
  z-index: 1;
}

/* 确保工具区域在激活时完全清晰 */
.slider-section.tools-section.active {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* 增强工具卡片的清晰度 */
.slider-section .tool-item {
  background-color: #ffffff !important; /* 纯白背景 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* 增强阴影 */
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* 确保工具图标清晰 */
.slider-section .tool-icon {
  opacity: 1 !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.15));
}

/* 增强工具名称的可读性 */
.slider-section .tool-name {
  color: #333 !important;
  font-weight: 600;
}

/* 调整加载占位符的样式 */
.slider-section .loading-placeholder {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* 强制覆盖工具区域的所有背景 */
.tools-section *:not(.tool-item):not(.loading-placeholder):not(.tool-category):not(.tools-instruction) {
  background-color: transparent !important;
}

/* 确保主容器没有额外的padding或margin */
.slider-section#tools,
.tools-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.tools-section > .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .slider-nav {
    max-width: 400px;
  }
  
  .slider-nav-btn {
    font-size: 14px;
    padding: 10px 5px;
  }
  
  .slider-section {
    padding: 0 10px;
  }
}

/* 水波纹效果 */
.ripple {
  position: absolute;
  background: rgba(108, 92, 231, 0.2);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 添加新的文本样式，启用鼠标事件 */
.nav-btn-text {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0 5px;
}

/* 特别为工具区域调整 */
.tools-section.slider-section {
  padding-top: 0 !important;
}

.tools-section .tools-categories {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 重置tools区域的所有上边距 */
.slider-section#tools > *:first-child,
.tools-section > *:first-child,
.tools-section .container > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}