/**
 * Icon Display Fixes for XSSNow
 * Ensures all FontAwesome icons display correctly and are properly aligned
 */

/* Font Awesome Icon Base Fixes */
.fas, .fab, .far, .fal, .fad, .fass, .fasr, .fasl {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    text-rendering: auto;
    display: inline-block;
    vertical-align: middle;
}

.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}

/* Icon Alignment and Spacing Fixes */
i.fas, i.fab, i.far, i.fal, i.fad, i.fass, i.fasr, i.fasl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    min-width: 1em;
    text-align: center;
}

/* Navigation Icons */
.nav-brand i {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    color: var(--neon-green) !important;
}

.github-btn i {
    margin-right: 0.5rem;
    font-size: 1.1rem;
    vertical-align: middle;
}

.nav-actions i {
    vertical-align: middle;
}

/* Search Icons */
.search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    z-index: 2;
}

.clear-search i {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Button Icons */
.btn i, .cta-button i, .secondary-button i {
    margin-right: 0.5rem;
    font-size: 1rem;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
}

.btn-reset i, .btn-download i {
    margin-right: 0.5rem;
    font-size: 0.9rem;
    vertical-align: middle;
}

/* View Toggle Icons */
.view-toggle i {
    font-size: 1.1rem;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.view-toggle.active i {
    color: var(--neon-green);
}

/* Loading and Status Icons */
.loading-state i {
    font-size: 2rem;
    color: var(--neon-green);
    margin-bottom: 1rem;
    display: block;
}

.fa-spinner {
    animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Footer Icons */
footer i {
    margin-right: 0.5rem;
    font-size: 1rem;
    vertical-align: middle;
    color: var(--neon-green);
}

.social-links i {
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

.social-links a:hover i {
    color: var(--neon-cyan);
    transform: scale(1.1);
}

/* Star Button Icon */
.star-btn i {
    margin-right: 0.5rem;
    color: #ffd700;
    font-size: 1rem;
}

/* Generator Page Icons */
.generator-section i {
    vertical-align: middle;
}

.generator-controls i {
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.preset-button i {
    margin-right: 0.5rem;
    font-size: 1rem;
    color: var(--neon-green);
}

/* Contributors Page Icons */
.contributor-card i {
    vertical-align: middle;
}

.contributor-stats i {
    margin-right: 0.3rem;
    font-size: 0.9rem;
    color: var(--neon-green);
}

.contribution-step i {
    font-size: 1.5rem;
    color: var(--neon-green);
    margin-bottom: 0.5rem;
    display: block;
}

/* Docs Page Icons */
.docs-nav i {
    margin-right: 0.5rem;
    font-size: 0.9rem;
    vertical-align: middle;
}

.example-card i {
    margin-right: 0.5rem;
    color: var(--neon-green);
    font-size: 1.1rem;
}

/* Payload Card Icons */
.payload-card i {
    vertical-align: middle;
}

.payload-meta i {
    margin-right: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.copy-btn i {
    font-size: 0.9rem;
    margin-right: 0.3rem;
}

.payload-actions i {
    font-size: 1rem;
    vertical-align: middle;
}

/* Category Icons */
.category-card i {
    font-size: 2rem;
    color: var(--neon-green);
    margin-bottom: 1rem;
    display: block;
    text-align: center;
}

/* Feature Icons */
.feature-card i {
    font-size: 2.5rem;
    color: var(--neon-cyan);
    margin-bottom: 1rem;
    display: block;
    text-align: center;
}

/* Stats Icons */
.stat-card i {
    font-size: 2rem;
    color: var(--neon-green);
    margin-bottom: 0.5rem;
    display: block;
    text-align: center;
}

/* Mobile Icon Adjustments */
@media (max-width: 768px) {
    .nav-brand i {
        font-size: 1.3rem;
        margin-right: 0.3rem;
    }

    .github-btn i {
        margin-right: 0.3rem;
        font-size: 1rem;
    }

    .feature-card i {
        font-size: 2rem;
    }

    .category-card i {
        font-size: 1.5rem;
    }

    .stat-card i {
        font-size: 1.5rem;
    }

    .contribution-step i {
        font-size: 1.2rem;
    }

    .btn i {
        margin-right: 0.3rem;
        font-size: 0.9rem;
    }
}

/* Ensure icons don't break text flow */
.text-with-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Fix for any icon rendering issues */
i[class*="fa-"]:before {
    font-family: inherit;
    font-weight: inherit;
}

/* Specific icon fixes for common issues */
.fa-user-ninja:before { content: "\f504"; }
.fa-github:before { content: "\f09b"; }
.fa-search:before { content: "\f002"; }
.fa-times:before { content: "\f00d"; }
.fa-refresh:before { content: "\f021"; }
.fa-download:before { content: "\f019"; }
.fa-th-large:before { content: "\f009"; }
.fa-list:before { content: "\f03a"; }
.fa-spinner:before { content: "\f110"; }
.fa-star:before { content: "\f005"; }
.fa-magic:before { content: "\f0d0"; }
.fa-lightbulb:before { content: "\f0eb"; }
.fa-shield-alt:before { content: "\f3ed"; }
.fa-history:before { content: "\f1da"; }
.fa-copy:before { content: "\f0c5"; }
.fa-external-link-alt:before { content: "\f35d"; }

/* Ensure proper icon spacing in flex containers */
.nav-menu a i,
.nav-actions a i,
.footer-links a i {
    flex-shrink: 0;
}

/* Icon hover effects */
.clickable-icon {
    transition: all var(--transition-fast);
    cursor: pointer;
}

.clickable-icon:hover {
    transform: scale(1.1);
    color: var(--neon-green) !important;
}

/* Fix for icon alignment in buttons */
button i, .btn i, a.btn i {
    vertical-align: baseline;
    line-height: inherit;
}

/* Terminal icons */
.terminal-controls i {
    font-size: 0.8rem;
    vertical-align: middle;
}

/* Breadcrumb icons */
.breadcrumb i {
    margin: 0 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}