/**
 * Professional Icon System
 * Consistent, minimalist icons throughout the application
 */

/* Icon Base Styles */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

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

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

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

/* Professional Icon Containers */
.icon-container {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--navy-subtle), var(--blue-subtle));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-primary);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.icon-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--navy-primary), var(--blue-primary));
  color: white;
}

.icon-container-primary {
  background: linear-gradient(135deg, var(--navy-primary), var(--blue-primary));
  color: white;
  box-shadow: var(--shadow-md);
}

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

/* Feature Icons - Subtle and Professional */
.feature-icon {
  width: 40px;
  height: 40px;
  background: var(--navy-subtle);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-primary);
  flex-shrink: 0;
}

.feature-icon svg {
  width: 20px;
  height: 20px;
}

/* Category Badge Icons */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: var(--navy-subtle);
  border-radius: var(--radius-full);
  color: var(--navy-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all var(--transition);
}

.category-badge:hover {
  background: var(--navy-primary);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.category-badge svg {
  width: 14px;
  height: 14px;
}

/* Status Icons */
.status-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-icon.success {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(21, 128, 61);
}

.status-icon.warning {
  background: rgba(249, 115, 22, 0.1);
  color: rgb(194, 65, 12);
}

.status-icon.error {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(185, 28, 28);
}

.status-icon.info {
  background: var(--navy-subtle);
  color: var(--navy-primary);
}

/* Navigation Icons - Minimal and Clean */
.nav-icon {
  width: 20px;
  height: 20px;
  opacity: 0.7;
  transition: opacity var(--transition);
}

.nav-link:hover .nav-icon {
  opacity: 1;
}

/* Button Icons */
.btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Floating Action Button Icon */
.floating-consult-btn .btn-icon {
  width: 24px;
  height: 24px;
}

/* Card Header Icons */
.card-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--navy-primary), var(--blue-primary));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
}

.card:hover .card-icon {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.card-icon svg {
  width: 28px;
  height: 28px;
}

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

.icon-pulse {
  animation: iconPulse 3s ease-in-out infinite;
}

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

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

/* Professional Icon Library - Common Icons */
.icon-calendar::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M16 2V6M8 2V6M3 10H21' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-check::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-info::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M12 16V12M12 8H12.01' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-user::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-mail::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 6L12 13L2 6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-phone::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 16.92V19.92C22 20.49 21.54 20.97 20.97 21C9.44 20.41 2 12.96 2 1.03C2.03 0.46 2.51 0 3.08 0H6.08C6.62 0 7.07 0.42 7.11 0.96C7.18 1.93 7.36 2.88 7.64 3.79C7.76 4.18 7.65 4.61 7.36 4.9L5.59 6.67C7.19 9.85 9.64 12.3 12.82 13.9L14.59 12.13C14.88 11.84 15.31 11.73 15.7 11.85C16.61 12.13 17.56 12.31 18.53 12.38C19.07 12.42 19.49 12.87 19.49 13.41V16.41C19.49 16.95 19.03 17.43 18.46 17.46Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-book::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5C4 18.837 4.26339 18.2011 4.73223 17.7322C5.20107 17.2634 5.83696 17 6.5 17H20M4 19.5C4 20.163 4.26339 20.7989 4.73223 21.2678C5.20107 21.7366 5.83696 22 6.5 22H20V2H6.5C5.83696 2 5.20107 2.26339 4.73223 2.73223C4.26339 3.20107 4 3.83696 4 4.5V19.5Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-clock::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M12 6V12L16 14' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-star::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-search::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M21 21L16.65 16.65' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-filter::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 3H2L10 12.46V19L14 21V12.46L22 3Z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-arrow-right::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L12 5M19 12L12 19' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-download::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15M7 10L12 15M12 15L17 10M12 15V3' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-send::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Reduce icon visual weight */
.subtle-icon {
  opacity: 0.6;
  transition: opacity var(--transition);
}

.subtle-icon:hover {
  opacity: 1;
}

/* Icon groups */
.icon-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-group-lg {
  gap: 1rem;
}