/* 蓝色主题全局样式文件 */

/* CSS变量定义 - 蓝色主题色系 */
:root {
  /* 主色调 */
  --primary-color: #165DFF;
  --primary-dark: #0E42D2;
  --primary-light: #4080FF;
  --primary-lighter: #6AA1FF;
  
  /* 辅助色 */
  --secondary-color: #00B42A;
  --warning-color: #FF7D00;
  --danger-color: #F53F3F;
  --info-color: #14C9C9;
  
  /* 中性色 */
  --text-primary: #1D2129;
  --text-secondary: #4E5969;
  --text-tertiary: #86909C;
  --text-placeholder: #C9CDD4;
  
  /* 背景色 */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F3F5;
  --bg-tertiary: #F7F8FA;
  --bg-hover: #F7FAFF;
  
  /* 边框色 */
  --border-primary: #E5E6EB;
  --border-secondary: #C9CDD4;
  --border-light: #F2F3F5;
  
  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 全局样式重置与基础设置 */
* {
  box-sizing: border-box;
}

/* 颜色覆盖 - 替换原有橙色/红色主题 */
/* 主色调替换 */
.goods-price em, 
.squares .list_pic dl dd.price span, 
.squares .list_pic dl dd.promotion-price span {
  color: var(--primary-color) !important;
}

/* 按钮样式覆盖 */
.btn-primary {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* 导航栏样式覆盖 */
.nav-item.active a, 
.nav-item a:hover, 
.nav-item a:focus {
  color: var(--primary-color) !important;
}

/* 标题下划线样式 */
.section-title h2::after {
  background: var(--primary-color) !important;
}

/* 图标颜色覆盖 */
.feature-icon {
  color: var(--primary-color) !important;
}

/* FAQ问题标记 */
.faq-question::after {
  color: var(--primary-color) !important;
}

/* 标签样式 */
.discount-tag {
  background: rgba(22, 93, 255, 0.1) !important;
  color: var(--primary-color) !important;
}

/* 隐藏商品图片相关样式 */
/* 服务器列表中隐藏图片 */
.server-item img {
  display: none !important;
}

/* 商品卡片中隐藏图片 */
.goods-thumb {
  display: none !important;
}

/* 客户案例中隐藏图片 */
.case-image {
  display: none !important;
}

/* 调整客户案例内容区域宽度 */
.case-content {
  width: 100% !important;
}

/* 服务器卡片样式调整 - 无图片布局优化 */
.server-item {
  min-height: 400px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.server-config-info {
  margin-top: 10px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 配置网格布局优化 */
.config-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}

/* 配置项样式优化 */
.config-item {
  background: rgba(22, 93, 255, 0.05) !important;
  padding: 6px !important;
  border-radius: 4px !important;
  border-left: 2px solid transparent !important;
  transition: all 0.3s ease !important;
}

.config-item:hover {
  background: rgba(22, 93, 255, 0.1) !important;
  border-left: 2px solid var(--primary-color) !important;
}

/* 价格显示样式优化 */
.promo-price {
  color: var(--primary-color) !important;
  font-weight: 600 !important;
}

/* 已选标签/活动标签样式 */
.tabs-nav .on {
  border-color: var(--primary-color) !important;
}

.tabs-nav .on h3 {
  color: var(--primary-color) !important;
}

.tabs-nav .on i {
  border-color: transparent transparent var(--primary-color) !important;
}

/* 评分样式 */
.stat-value {
  color: var(--primary-color) !important;
}

/* 悬停效果优化 */
.server-item:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px) !important;
}

/* 焦点区域样式优化 */
.home-focus-layout {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 100%) !important;
}

/* 服务保障区域样式 */
.policy ul li {
  background-position: center 10px !important;
  background-size: 30px 30px !important;
  padding-top: 45px !important;
  text-align: center !important;
  color: var(--text-secondary) !important;
}

/* 滚动条样式优化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-lighter);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .config-grid {
    grid-template-columns: 1fr !important;
  }
  
  .server-item {
    min-height: 350px !important;
  }
}

/* 加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.server-item {
  animation: fadeIn 0.5s ease-out;
}

/* 按钮点击反馈动画 */
.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.98);
}

/* 优化交互体验 */
a {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* 提升可访问性 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}