/* ==========================================================================
   Protection Incendie - Icons CSS
   ========================================================================== */

/* Icon Font Base */
@font-face {
  font-family: 'ProtectionIcons';
  src: url('../fonts/protection-icons.woff2') format('woff2'),
       url('../fonts/protection-icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Icon Base Class */
[class^="icon-"], [class*=" icon-"] {
  font-family: 'ProtectionIcons', sans-serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fire Safety Icons */
.icon-fire::before { content: "🔥"; }
.icon-extinguisher::before { content: "🧯"; }
.icon-alarm::before { content: "🚨"; }
.icon-detector::before { content: "🔍"; }
.icon-sprinkler::before { content: "💧"; }
.icon-shield::before { content: "🛡️"; }
.icon-safety::before { content: "⚠️"; }
.icon-emergency::before { content: "🆘"; }

/* Communication Icons */
.icon-phone::before { content: "📞"; }
.icon-email::before { content: "✉️"; }
.icon-location::before { content: "📍"; }
.icon-whatsapp::before { content: "💬"; }

/* Navigation Icons */
.icon-menu::before { content: "☰"; }
.icon-close::before { content: "✕"; }
.icon-arrow-up::before { content: "↑"; }
.icon-arrow-down::before { content: "↓"; }
.icon-arrow-left::before { content: "←"; }
.icon-arrow-right::before { content: "→"; }
.icon-search::before { content: "🔍"; }

/* Social Media Icons */
.icon-facebook::before { content: "📘"; }
.icon-linkedin::before { content: "💼"; }
.icon-twitter::before { content: "🐦"; }
.icon-instagram::before { content: "📷"; }
.icon-youtube::before { content: "📺"; }

/* Action Icons */
.icon-download::before { content: "⬇️"; }
.icon-upload::before { content: "⬆️"; }
.icon-send::before { content: "📤"; }
.icon-check::before { content: "✓"; }
.icon-star::before { content: "⭐"; }
.icon-heart::before { content: "❤️"; }

/* Service Specific Icons */
.icon-maintenance::before { content: "🔧"; }
.icon-audit::before { content: "📋"; }
.icon-consulting::before { content: "💡"; }
.icon-training::before { content: "🎓"; }
.icon-certificate::before { content: "🏆"; }
.icon-24h::before { content: "🕐"; }

/* SVG Icon Styles */
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
}

.svg-icon--small {
  width: 0.8em;
  height: 0.8em;
}

.svg-icon--large {
  width: 1.5em;
  height: 1.5em;
}

.svg-icon--xl {
  width: 2em;
  height: 2em;
}

/* Icon Containers */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  font-size: 18px;
}

.icon-container--small {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

.icon-container--large {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

.icon-container--square {
  border-radius: 8px;
}

.icon-container--outline {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

/* Icon Animations */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes iconSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes iconBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.icon-pulse {
  animation: iconPulse 2s infinite;
}

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

.icon-bounce {
  animation: iconBounce 2s infinite;
}

/* Service Icons Grid */
.service-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.service-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.service-icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.15);
}

.service-icon .icon-container {
  margin-bottom: 15px;
}

.service-icon h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

/* Emergency Icons */
.emergency-icon {
  color: #dc2626;
  animation: iconPulse 1.5s infinite;
}

.emergency-icon--urgent {
  animation: iconBounce 1s infinite;
}

/* Status Icons */
.status-icon--success {
  color: #16a34a;
}

.status-icon--warning {
  color: #ca8a04;
}

.status-icon--error {
  color: #dc2626;
}

.status-icon--info {
  color: #2563eb;
}

/* Icon Lists */
.icon-list {
  list-style: none;
  padding: 0;
}

.icon-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 0;
}

.icon-list li::before {
  content: "✓";
  color: var(--primary-color);
  font-weight: bold;
  margin-right: 10px;
  font-size: 16px;
}

.icon-list--fire li::before {
  content: "🔥";
}

.icon-list--safety li::before {
  content: "🛡️";
}

.icon-list--check li::before {
  content: "✅";
}

/* Responsive Icon Adjustments */
@media (max-width: 768px) {
  .icon-container {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
  
  .icon-container--large {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .service-icons {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 15px;
  }
  
  .service-icon {
    padding: 15px;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .icon-container {
    border: 2px solid currentColor;
  }
  
  .service-icon {
    border: 2px solid var(--border-color);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .icon-pulse,
  .icon-spin,
  .icon-bounce,
  .emergency-icon,
  .emergency-icon--urgent {
    animation: none;
  }
}

/* Print Styles */
@media print {
  [class^="icon-"], [class*=" icon-"] {
    color: black !important;
  }
  
  .icon-container {
    background-color: white !important;
    border: 1px solid black !important;
    color: black !important;
  }
}