/* Custom Icon Font - Only icons we actually use */
@font-face {
  font-family: 'SwiftIcons';
  src: url('data:font/woff2;base64,') format('woff2');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

/* Icon base class */
.icon {
  font-family: 'SwiftIcons', Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* SVG Icons as CSS - Much lighter than Font Awesome */
.icon-phone::before { content: "📞"; }
.icon-envelope::before { content: "✉️"; }
.icon-clock::before { content: "🕐"; }
.icon-map::before { content: "📍"; }
.icon-car::before { content: "🚗"; }
.icon-tools::before { content: "🔧"; }
.icon-oil::before { content: "🛢️"; }
.icon-battery::before { content: "🔋"; }
.icon-tire::before { content: "⚙️"; }
.icon-wrench::before { content: "🔧"; }
.icon-star::before { content: "⭐"; }
.icon-check::before { content: "✅"; }
.icon-whatsapp::before { content: "💬"; }
.icon-award::before { content: "🏆"; }
.icon-users::before { content: "👥"; }
.icon-shield::before { content: "🛡️"; }
.icon-dollar::before { content: "💰"; }

/* Better approach: Use CSS-only icons */
.css-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
}

/* Phone icon */
.css-icon-phone {
  background: currentColor;
  border-radius: 3px;
  transform: rotate(-30deg);
}
.css-icon-phone::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 2px;
}

/* Email icon */
.css-icon-envelope {
  background: currentColor;
  border-radius: 2px;
}
.css-icon-envelope::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: white;
  transform: skewY(-20deg);
}

/* Clock icon */
.css-icon-clock {
  border: 2px solid currentColor;
  border-radius: 50%;
}
.css-icon-clock::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 40%;
  background: currentColor;
  transform: translate(-50%, -100%);
}
.css-icon-clock::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

/* Car icon */
.css-icon-car {
  background: currentColor;
  border-radius: 4px 4px 2px 2px;
  position: relative;
}
.css-icon-car::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 15%;
  width: 20%;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.css-icon-car::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 15%;
  width: 20%;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

/* Tools icon */
.css-icon-tools {
  background: currentColor;
  transform: rotate(45deg);
  border-radius: 1px;
}
.css-icon-tools::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 20%;
  right: 20%;
  bottom: 20%;
  background: white;
  border-radius: 1px;
}

/* Star icon */
.css-icon-star {
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Check icon */
.css-icon-check {
  border: 2px solid currentColor;
  border-radius: 50%;
}
.css-icon-check::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 20%;
  width: 25%;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.css-icon-check::after {
  content: '';
  position: absolute;
  top: 40%;
  left: 35%;
  width: 45%;
  height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
}

/* WhatsApp icon */
.css-icon-whatsapp {
  background: currentColor;
  border-radius: 50%;
}
.css-icon-whatsapp::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  right: 25%;
  bottom: 25%;
  background: white;
  border-radius: 50%;
}