/* 享火火业务生态自定义图标系统 */
:root {
  --icon-primary: #ff4757;
  --icon-secondary: #3498db;
  --icon-accent: #2ed573;
  --icon-warning: #ffa502;
  --icon-light: #f8f9fa;
  --icon-dark: #333;
}

/* 图标容器样式 */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  margin-bottom: 20px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.service-card:hover .icon-container {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 外卖服务图标 */
.icon-delivery {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.1), rgba(231, 76, 60, 0.2));
  border-color: rgba(255, 71, 87, 0.3);
}

.icon-delivery svg {
  width: 40px;
  height: 40px;
  fill: var(--icon-primary);
}

/* 私厨上门图标 */
.icon-private-chef {
  background: linear-gradient(135deg, rgba(255, 165, 2, 0.1), rgba(255, 140, 0, 0.2));
  border-color: rgba(255, 165, 2, 0.3);
}

.icon-private-chef svg {
  width: 40px;
  height: 40px;
  fill: var(--icon-warning);
}

/* 到店就餐图标 */
.icon-dine-in {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(41, 128, 185, 0.2));
  border-color: rgba(52, 152, 219, 0.3);
}

.icon-dine-in svg {
  width: 40px;
  height: 40px;
  fill: var(--icon-secondary);
}

/* 即时零售图标 */
.icon-instant-retail {
  background: linear-gradient(135deg, rgba(46, 213, 115, 0.1), rgba(39, 174, 96, 0.2));
  border-color: rgba(46, 213, 115, 0.3);
}

.icon-instant-retail svg {
  width: 40px;
  height: 40px;
  fill: var(--icon-accent);
}

/* 电商平台图标 */
.icon-ecommerce {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.1), rgba(231, 76, 60, 0.2));
  border-color: rgba(255, 71, 87, 0.3);
}

.icon-ecommerce svg {
  width: 40px;
  height: 40px;
  fill: var(--icon-primary);
}

/* 保洁服务图标 */
.icon-cleaning {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(41, 128, 185, 0.2));
  border-color: rgba(52, 152, 219, 0.3);
}

.icon-cleaning svg {
  width: 40px;
  height: 40px;
  fill: var(--icon-secondary);
}

/* 短视频直播图标 */
.icon-live-stream {
  background: linear-gradient(135deg, rgba(255, 165, 2, 0.1), rgba(255, 140, 0, 0.2));
  border-color: rgba(255, 165, 2, 0.3);
}

.icon-live-stream svg {
  width: 40px;
  height: 40px;
  fill: var(--icon-warning);
}

/* AI健康守护图标 */
.icon-ai-health {
  background: linear-gradient(135deg, rgba(46, 213, 115, 0.1), rgba(39, 174, 96, 0.2));
  border-color: rgba(46, 213, 115, 0.3);
}

.icon-ai-health svg {
  width: 40px;
  height: 40px;
  fill: var(--icon-accent);
}

/* 图标动画效果 */
@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.icon-container:hover {
  animation: iconPulse 1s ease-in-out;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .icon-container {
    width: 60px;
    height: 60px;
    border-radius: 15px;
  }
  
  .icon-container svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .icon-container {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }
  
  .icon-container svg {
    width: 25px;
    height: 25px;
  }
}