/* 美丽的渐变图标样式 - 基于用户喜欢的格式 */

/* 粉色图标的主要样式 - 接近白色的淡粉色 */
.feature-icon {
  background: linear-gradient(135deg, #fef7f8 0%, #fdeef0 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(253,238,240,0.15) !important;
  position: relative !important;
}

/* 内部高光效果 */
.feature-icon::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%) !important;
  border-radius: 50% !important;
  display: block !important;
}

/* 移除之前的::after效果 */
.feature-icon::after {
  display: none !important;
}

/* PNG图标样式 */
.feature-icon img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  z-index: 10 !important;
  position: relative !important;
}

/* 确保baby-icon中的图片不被遮挡 */
.baby-icon img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  z-index: 10 !important;
  position: relative !important;
}

/* 确保card-icon中的图片不被遮挡 */
.card-icon img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  z-index: 10 !important;
  position: relative !important;
}

/* 婴儿图标 - 接近白色的淡蓝色渐变 */
.baby-icon,
.feature-icon.baby {
  background: linear-gradient(135deg, #f7fbfe 0%, #f0f8fd 100%) !important;
  box-shadow: 0 4px 15px rgba(240,248,253,0.15) !important;
}

/* 知识图标 - 接近白色的淡紫色渐变 */
.knowledge-icon,
.feature-icon.knowledge {
  background: linear-gradient(135deg, #fbf9fe 0%, #f8f4fd 100%) !important;
  box-shadow: 0 4px 15px rgba(248,244,253,0.15) !important;
}

/* 心形图标 - 粉色渐变 */
.heart-icon {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(255,154,158,0.3) !important;
  position: relative !important;
}

.heart-icon::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%) !important;
  border-radius: 50% !important;
  display: block !important;
}

/* 妈妈图标 - 粉色渐变 */
.mom-icon {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(255,154,158,0.3) !important;
  position: relative !important;
  color: #fff !important;
}

.mom-icon::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%) !important;
  border-radius: 50% !important;
  display: block !important;
}

/* 功能方块白色背景配灰色渐变边框 */
.feature-item {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  position: relative !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.feature-item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, 
    rgba(200, 200, 200, 0.8) 0%, 
    rgba(180, 180, 180, 0.6) 25%, 
    rgba(160, 160, 160, 0.7) 50%, 
    rgba(140, 140, 140, 0.8) 75%, 
    rgba(120, 120, 120, 0.9) 100%) !important;
  border-radius: 10px !important;
  padding: 2px !important;
  margin: -2px !important;
  z-index: -1 !important;
}

/* 移除功能方块的::after效果，保留::before用于边框 */
.feature-item::after {
  display: none !important;
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
  .feature-icon,
  .heart-icon,
  .mom-icon {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
    box-shadow: 0 4px 15px rgba(255,154,158,0.4) !important;
  }
  
  .baby-icon {
    background: linear-gradient(135deg, #74b9ff 0%, #81ecec 100%) !important;
    box-shadow: 0 4px 15px rgba(116,185,255,0.4) !important;
  }
  
  .knowledge-icon {
    background: linear-gradient(135deg, #a29bfe 0%, #fd79a8 100%) !important;
    box-shadow: 0 4px 15px rgba(162,155,254,0.4) !important;
  }
}