/*!
 * Local CSS Icons - Complete replacement for Font Awesome
 * Pure CSS icons using Unicode characters and CSS shapes
 */

/* Base icon classes */
.icon-local {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
}

/* Navigation Icons */
.icon-home::before { content: "🏠"; }
.icon-cogs::before { content: "⚙️"; }
.icon-book::before { content: "📖"; }
.icon-flask::before { content: "🧪"; }
.icon-mobile::before { content: "📱"; }
.icon-login::before { content: "🔑"; }
.icon-user-plus::before { content: "👤"; }

/* Hero Icons */
.icon-rocket::before { content: "🚀"; }
.icon-shield::before { content: "🛡️"; }
.icon-lightning::before { content: "⚡"; }
.icon-chart::before { content: "📈"; }
.icon-play::before { content: "▶️"; }

/* Service Icons */
.icon-credit-card::before { content: "💳"; }
.icon-wallet::before { content: "👝"; }
.icon-calculator::before { content: "🧮"; }

/* Statistics Icons */
.icon-users::before { content: "👥"; }
.icon-exchange::before { content: "🔄"; }
.icon-headset::before { content: "🎧"; }

/* CTA Icons */
.icon-info::before { content: "ℹ️"; }
.icon-code::before { content: "💻"; }
.icon-handshake::before { content: "🤝"; }

/* Footer Icons */
.icon-building::before { content: "🏢"; }
.icon-box::before { content: "📦"; }
.icon-phone::before { content: "📞"; }
.icon-envelope::before { content: "✉️"; }
.icon-location::before { content: "📍"; }

/* Social Icons */
.icon-qq::before { content: "Q"; }
.icon-wechat::before { content: "💬"; }
.icon-alipay::before { content: "💰"; }

/* Utility Icons */
.icon-up::before { content: "▲"; }
.icon-down::before { content: "▼"; }
.icon-right::before { content: "→"; }
.icon-qr::before { content: "⬜"; }
.icon-close::before { content: "✕"; }
.icon-warning::before { content: "❗"; }
.icon-menu::before { content: "☰"; }

/* CSS-only geometric icons (fallback) */
.icon-css {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* Home icon as CSS shape */
.icon-css.icon-home::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0.1em;
  width: 0.8em;
  height: 0.6em;
  border: 2px solid currentColor;
  border-top: none;
}

.icon-css.icon-home::after {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 0.3em;
  width: 0.4em;
  height: 0.4em;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  border-bottom: none;
  border-top: none;
}

/* Gear icon as CSS shape */
.icon-css.icon-cogs::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  width: 0.6em;
  height: 0.6em;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: 
    0 0 0 2px currentColor,
    inset 0 0 0 2px currentColor;
}

/* Menu icon as CSS shape */
.icon-css.icon-menu::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0.1em;
  width: 0.8em;
  height: 2px;
  background: currentColor;
  box-shadow: 
    0 0.2em 0 currentColor,
    0 0.4em 0 currentColor;
}

/* Animation effects */
.icon-local {
  transition: transform 0.2s ease;
}

.icon-local:hover {
  transform: scale(1.1);
}

.icon-spin {
  animation: icon-spin 2s linear infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-pulse {
  animation: icon-pulse 1s ease-in-out infinite alternate;
}

@keyframes icon-pulse {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

/* Size variations */
.icon-xs { font-size: 0.75em; }
.icon-sm { font-size: 0.875em; }
.icon-lg { font-size: 1.33em; }
.icon-xl { font-size: 1.5em; }
.icon-2x { font-size: 2em; }
.icon-3x { font-size: 3em; }