/* CSS Icons for SparkCalc */

/* Icon Base Styles */
.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.feature-icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.feature-icon::before,
.feature-icon::after {
  content: '';
  position: absolute;
  transition: all 0.3s ease;
}

/* Photo Calculation Icon */
.icon-photo {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.icon-photo::before {
  width: 32px;
  height: 24px;
  background-color: white;
  border-radius: 2px;
  border: 2px solid white;
}

.icon-photo::after {
  width: 14px;
  height: 14px;
  background-color: #4facfe;
  border: 2px solid white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Voice Calculation Icon */
.icon-voice {
  background: linear-gradient(135deg, #ff9a9e 0%, #fd79a8 100%);
}

.icon-voice::before {
  width: 20px;
  height: 30px;
  background-color: white;
  border-radius: 15px;
  border: 2px solid white;
}

.icon-voice::after {
  content: '〰';
  color: white;
  font-size: 24px;
  top: 56%;
  left: 55%;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Theme Customization Icon */
.icon-theme {
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  overflow: hidden;
}

.icon-theme::before {
  width: 40px;
  height: 40px;
  background: conic-gradient(
    #ff9a9e 0deg, 
    #fd79a8 72deg, 
    #a18cd1 144deg, 
    #fbc2eb 216deg, 
    #4facfe 288deg, 
    #00f2fe 360deg
  );
  border-radius: 50%;
}

.icon-theme::after {
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Calculator Icon */
.icon-calculator {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.icon-calculator::before {
  content: '';
  width: 36px;
  height: 44px;
  background-color: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-calculator::after {
  content: '1 2 3\A4 5 6\A7 8 9';
  white-space: pre;
  font-size: 10px;
  font-weight: bold;
  color: #667eea;
  line-height: 1.3;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Interface Icon */
.icon-interface {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.icon-interface::before {
  width: 40px;
  height: 28px;
  background-color: white;
  border-radius: 4px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-interface::after {
  width: 32px;
  height: 3px;
  background-color: #f093fb;
  border-radius: 2px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 0 #f093fb, 0 -8px 0 #f093fb;
}