/* ===============================
   LOCAL SVG ICONS - Professional Icons
   =============================== */

.icon-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
    flex-shrink: 0;
    min-width: 1em; /* Prevent collapse */
    min-height: 1em; /* Prevent collapse */
    aspect-ratio: 1/1; /* Force square aspect ratio */
}

/* Logo Icons - Fixed sizing */
.logo-icon .icon-svg {
    width: 32px;
    height: 32px;
    color: inherit;
}

.nav-icon .icon-svg {
    width: 20px;
    height: 20px;
    color: inherit;
}

/* Service Icons - Fixed sizing */
.service-icon {
    width: 80px; /* Fixed container width */
    height: 80px; /* Fixed container height */
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 64, 175, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Prevent shrinking */
}

.service-icon .icon-svg {
    width: 48px;
    height: 48px;
    color: #1e40af;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.service-icon.icon-crosshairs .icon-svg {
    color: #059669;
}

.service-icon.icon-map-marker .icon-svg {
    color: #dc2626;
}

.service-icon.icon-bolt .icon-svg {
    color: #f59e0b;
}

/* Feature Icons - Fixed sizing for circular background */
.feature-icon {
    width: 64px; /* Fixed container width */
    height: 64px; /* Fixed container height */
    border-radius: 50%;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Prevent shrinking */
}

.feature-icon .icon-svg {
    width: 24px;
    height: 24px;
    color: white;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* Badge Icons - Fixed sizing */
.badge-icon .icon-svg,
.credential-icon .icon-svg {
    width: 16px;
    height: 16px;
    color: inherit;
}

/* Benefit Icons - Fixed sizing */
.benefit-item .icon-svg {
    width: 14px;
    height: 14px;
    color: #10b981;
    margin-right: 8px;
    flex-shrink: 0;
}

/* CTA Icons - Fixed sizing */
.cta-icon .icon-svg,
.banner-icon .icon-svg {
    width: 1em;
    height: 1em;
    color: inherit;
}

/* Footer Logo Icon - Fixed sizing */
.footer-logo .logo-icon .icon-svg {
    width: 24px;
    height: 24px;
    color: white;
}

/* Hover Effects */
.service-card:hover .service-icon .icon-svg {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.feature-card:hover .feature-icon .icon-svg {
    transform: rotate(5deg) scale(1.1);
}

.credential-badge:hover .badge-icon .icon-svg {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

/* Sync Animation */
.feature-icon .icon-sync {
    animation: gentle-rotate 4s ease-in-out infinite;
}

@keyframes gentle-rotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.feature-card:hover .feature-icon .icon-sync {
    animation: none;
    transform: rotate(5deg) scale(1.1);
}

/* Professional Effects */
.logo-icon .icon-svg {
    filter: drop-shadow(0 2px 4px rgba(30, 64, 175, 0.3));
}

/* ========================================
   MOBILE ICON CLS PREVENTION
   ======================================== */

@media (max-width: 768px) {
    /* Enforce stable icon dimensions on mobile */
    .service-icon {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        flex-shrink: 0 !important;
    }
    
    .service-icon .icon-svg {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .feature-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        flex-shrink: 0 !important;
    }
    
    .feature-icon .icon-svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
    
    /* Mobile logo adjustments */
    .logo-icon .icon-svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Disable animations on mobile to prevent CLS */
    .service-icon .icon-svg,
    .feature-icon .icon-svg {
        transition: none !important;
    }
    
    .feature-icon .icon-sync {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile icon fixes */
    .service-icon {
        width: 64px !important;
        height: 64px !important;
    }
    
    .service-icon .icon-svg {
        width: 32px !important;
        height: 32px !important;
    }
    
    .feature-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    .feature-icon .icon-svg {
        width: 18px !important;
        height: 18px !important;
    }
}

.feature-icon .icon-shield {
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
}

.cta-primary:hover .cta-icon .icon-svg {
    transform: translateX(3px);
    transition: transform 0.3s ease;
}

.footer-credentials .credential:hover .credential-icon .icon-svg {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Fix for benefit items layout */
.benefit-item {
    display: flex;
    align-items: center;
}