/* ========================================
   MODERN INDUSTRY ICONS - PREMIUM CSS DESIGN
   Updated: 2025-01-27 - Circular Dotted Border Style
   ======================================== */

/* Industry dropdown width - bigger like reference */
.dropdown-grid.width-full-2 {
  min-width: 680px !important;
  width: auto !important;
}

.dropdown-grid.width-full-2 .dropdown-grid-item {
  min-width: 320px !important;
  padding: 20px 24px !important;
}

/* Industry dropdown link - icon and content alignment */
.dropdown-grid.width-full-2 .dropdown-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  position: relative !important;
  margin: 3px 0 !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

/* Hover effect - Light gray background with border */
.dropdown-grid.width-full-2 .dropdown-link:hover {
  background-color: #e9ecef !important;
  border-color: #ced4da !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Remove left border accent */
.dropdown-grid.width-full-2 .dropdown-link::before {
  display: none !important;
}

/* Icon wrapper - Circular frame with dotted border (SAME AS SERVICES) */
.industry-icon-wrapper {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #f5f9ff !important;
  border: 2px dotted #b8d4f0 !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
}

/* Hover state for wrapper - Subtle effect */
.dropdown-link:hover .industry-icon-wrapper {
  background: #f5f9ff !important;
  border-color: #3b82f6 !important;
  border-style: solid !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
  transform: scale(1.05) !important;
}

/* Dropdown info - content right side of icon */
.dropdown-grid.width-full-2 .dropdown-info {
  flex: 1 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
}

.dropdown-grid.width-full-2 .dropdown-info .drop-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1a1a2e !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
  transition: color 0.3s ease !important;
}

/* Title color stays same on hover */
.dropdown-grid.width-full-2 .dropdown-link:hover .drop-title {
  color: #1a1a2e !important;
}

.dropdown-grid.width-full-2 .dropdown-info p {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  transition: color 0.3s ease !important;
}

/* Description color change on hover */
.dropdown-grid.width-full-2 .dropdown-link:hover .dropdown-info p {
  color: #4b5563 !important;
}

/* Base icon styling - All icons blue (SAME AS SERVICES) */
.industry-icon {
  font-size: 16px !important;
  color: #3b82f6 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Hover state - Icon stays same */
.dropdown-link:hover .industry-icon {
  color: #3b82f6 !important;
  transform: scale(1.05) !important;
}

/* ========================================
   INDUSTRY SPECIFIC ICONS
   ======================================== */

/* Finance - fa-university */
.finance-icon::before {
  content: "\f19c";
}

/* Healthcare - fa-heartbeat */
.healthcare-icon::before {
  content: "\f21e";
}

/* Logistics - fa-truck */
.logistics-icon::before {
  content: "\f0d1";
}

/* Travel - fa-plane */
.travel-icon::before {
  content: "\f072";
}

/* Real Estate - fa-building */
.realestate-icon::before {
  content: "\f1ad";
}

/* Food Delivery - fa-utensils */
.food-icon::before {
  content: "\f2e7";
}

/* E-Commerce - fa-shopping-cart */
.ecommerce-icon::before {
  content: "\f07a";
}

/* BI Development - fa-chart-line */
.bi-icon::before {
  content: "\f201";
}

/* On-Demand - fa-mobile-alt */
.ondemand-icon::before {
  content: "\f3cd";
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 991.98px) {
  .industry-icon-wrapper {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  
  .industry-icon {
    font-size: 14px !important;
  }
  
  .dropdown-grid.width-full-2 {
    min-width: auto !important;
  }
  
  .dropdown-grid.width-full-2 .dropdown-grid-item {
    min-width: auto !important;
    padding: 15px !important;
  }
}

/* ========================================
   DARK MODE
   ======================================== */

[data-bs-theme=dark] .industry-icon-wrapper {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

[data-bs-theme=dark] .dropdown-link:hover .industry-icon-wrapper {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
}

[data-bs-theme=dark] .industry-icon {
  color: #60a5fa !important;
}

[data-bs-theme=dark] .dropdown-link:hover .industry-icon {
  color: #3b82f6 !important;
}

[data-bs-theme=dark] .dropdown-grid.width-full-2 .dropdown-info .drop-title {
  color: #ffffff !important;
}

[data-bs-theme=dark] .dropdown-grid.width-full-2 .dropdown-info p {
  color: #9ca3af !important;
}