/**
 * Mobile Navigation Icons - Font Awesome icon visibility fix
 */

/* Ensure Font Awesome icons are visible */
.vt-nav-icon,
.vt-nav-menu .vt-nav-icon,
.vt-nav-link .vt-nav-icon,
.vt-nav-item .vt-nav-icon {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Specific icon classes */
.vt-nav-icon.fa-home:before { content: "\f015" !important; }
.vt-nav-icon.fa-info-circle:before { content: "\f05a" !important; }
.vt-nav-icon.fa-clipboard-list:before { content: "\f46d" !important; }
.vt-nav-icon.fa-envelope:before { content: "\f0e0" !important; }

/* Mobile specific styles */
@media (max-width: 991px) {
    .vt-nav-icon {
        color: #006233 !important;
        font-size: 20px !important;
        width: 28px !important;
        height: 28px !important;
        margin-right: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    /* Icon container styles */
    .vt-nav-icon:before {
        display: inline-block !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Hover effects */
    .vt-nav-link:hover .vt-nav-icon {
        color: #007a3d !important;
        transform: scale(1.1) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Active state */
    .vt-nav-link.active .vt-nav-icon,
    .vt-nav-item.current-menu-item .vt-nav-icon {
        color: #ffffff !important;
    }
    
    /* Dark background for mobile menu */
    .xb-header-menu .vt-nav-icon,
    .vt-modern-navigation .vt-nav-icon {
        color: #006233 !important;
    }
    
    .xb-header-menu .vt-nav-link,
    .vt-modern-navigation .vt-nav-link {
        color: #2d3748 !important;
        background: #ffffff !important;
        margin-bottom: 2px !important;
        border-radius: 8px !important;
    }
    
    .xb-header-menu .vt-nav-link:hover,
    .vt-modern-navigation .vt-nav-link:hover {
        background: #f8f9fa !important;
        color: #006233 !important;
    }
}

/* Smaller devices */
@media (max-width: 767px) {
    .vt-nav-icon {
        font-size: 18px !important;
        width: 24px !important;
        height: 24px !important;
        margin-right: 12px !important;
    }
}

/* Fix for specific Font Awesome versions */
.fas.vt-nav-icon,
.far.vt-nav-icon,
.fab.vt-nav-icon {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
}

.fas.vt-nav-icon {
    font-weight: 900 !important;
}

.far.vt-nav-icon {
    font-weight: 400 !important;
}

/* Override any inline styles */
.vt-nav-icon[style] {
    color: #006233 !important;
}