/**
 * Icon Fixes and Fallbacks
 * 
 * Ensures Font Awesome icons work properly and provides
 * fallback styles for SVG icons.
 * 
 * @package Medexly
 * @since 1.0.0
 */

/* Font Awesome Icon Fixes */
.fas,
.far,
.fal,
.fab,
.fa {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure Font Awesome loads properly */
.fa:before {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900;
}

.far:before {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 400;
}

.fab:before {
  font-family: 'Font Awesome 5 Brands' !important;
  font-weight: 400;
}

/* SVG Icon Styles */
.medexly-icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon with Font Awesome fallback */
.fa-fallback {
  display: none !important;
}

/* Show Font Awesome when SVG fails to load */
.medexly-icon:not([data-loaded='true']) + .fa-fallback {
  display: inline-block !important;
}

/* Common icon sizes */
.icon-xs {
  width: 12px;
  height: 12px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 20px;
  height: 20px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-xl {
  width: 32px;
  height: 32px;
}

.icon-2xl {
  width: 48px;
  height: 48px;
}

/* Icon colors */
.icon-primary {
  color: var(--primary-color, #3b82f6);
}

.icon-secondary {
  color: var(--secondary-color, #6b7280);
}

.icon-success {
  color: var(--success-color, #10b981);
}

.icon-warning {
  color: var(--warning-color, #f59e0b);
}

.icon-error {
  color: var(--error-color, #ef4444);
}

/* Icon animations */
.icon-spin {
  animation: icon-spin 1s linear infinite;
}

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

.icon-pulse {
  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes icon-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Ensure icons are visible in dark mode */
.dark .medexly-icon {
  color: currentColor;
}

.dark .fas,
.dark .far,
.dark .fal,
.dark .fab,
.dark .fa {
  color: currentColor;
}

/* Fix for common icon issues */
.fa-search:before {
  content: '\f002';
}

.fa-user:before {
  content: '\f007';
}

.fa-user-md:before {
  content: '\f0f0';
}

.fa-hospital:before {
  content: '\f0f8';
}

.fa-phone:before {
  content: '\f095';
}

.fa-envelope:before {
  content: '\f0e0';
}

.fa-map-marker-alt:before {
  content: '\f3c5';
}

.fa-calendar:before {
  content: '\f133';
}

.fa-clock:before {
  content: '\f017';
}

.fa-star:before {
  content: '\f005';
}

.fa-heart:before {
  content: '\f004';
}

.fa-arrow-right:before {
  content: '\f061';
}

.fa-arrow-left:before {
  content: '\f060';
}

.fa-chevron-down:before {
  content: '\f078';
}

.fa-chevron-up:before {
  content: '\f077';
}

.fa-bars:before {
  content: '\f0c9';
}

.fa-times:before {
  content: '\f00d';
}

.fa-check:before {
  content: '\f00c';
}

.fa-plus:before {
  content: '\f067';
}

.fa-minus:before {
  content: '\f068';
}

.fa-external-link-alt:before {
  content: '\f35d';
}

.fa-info-circle:before {
  content: '\f05a';
}

.fa-exclamation-triangle:before {
  content: '\f071';
}

.fa-times-circle:before {
  content: '\f057';
}

.fa-check-circle:before {
  content: '\f058';
}

.fa-spinner:before {
  content: '\f110';
}

/* Loading state for icons */
.icon-loading {
  opacity: 0.6;
  animation: icon-pulse 1.5s ease-in-out infinite;
}

/* Responsive icon sizes */
@media (max-width: 640px) {
  .icon-responsive {
    width: 16px;
    height: 16px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .icon-responsive {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 1025px) {
  .icon-responsive {
    width: 24px;
    height: 24px;
  }
}