/**
 * 登录页面图标修复CSS
 * 专门解决登录页面中按钮图标显示为方框的问题
 */

/* 确保FontAwesome图标正确加载和显示 */
.fas, .far, .fab, .fal, .fa {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    text-rendering: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 品牌图标使用不同字体权重 */
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* 确保登录页面特定图标正确显示 */
.brand-logo i.fas.fa-atom,
.feature-icon i.fas.fa-atom,
.feature-icon i.fas.fa-flask,
.feature-icon i.fas.fa-shield-alt,
.feature-icon i.fas.fa-chart-line {
    font-size: inherit !important;
    color: inherit !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* OAuth按钮图标 */
.oauth-icon i.fab.fa-google,
.oauth-icon i.fab.fa-microsoft,
.oauth-arrow i.fas.fa-arrow-right {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* 表单标签图标 */
.form-label i.fas.fa-user,
.form-label i.fas.fa-lock {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    width: 16px !important;
    text-align: center !important;
}

/* 密码切换按钮图标 */
.password-toggle i.fas.fa-eye,
.password-toggle i.fas.fa-eye-slash {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* 登录按钮图标 */
.btn-primary i.fas.fa-flask.btn-icon,
.btn-primary i.fas.fa-spinner {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* 错误消息图标 */
.error-content i.fas.fa-exclamation-triangle {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* 注册链接图标 */
.register-link i.fas.fa-arrow-right {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* 语言选择器图标 */
.language-selector i.fas.fa-globe,
.language-selector i.fas.fa-chevron-down {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* 语言切换通知图标 */
.language-change-notification i.fas.fa-check-circle {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}

/* 如果图标仍然无法显示，显示备用emoji */
.icon-fixed-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 强制图标可见性，覆盖任何隐藏样式 */
i[class*="fa-"]:not(.icon-fixed-emoji) {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
}

/* 确保图标在加载过程中不闪烁 */
@keyframes iconFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fas, .far, .fab, .fal, .fa {
    animation: iconFadeIn 0.3s ease-in-out;
}

/* 特定场景的图标修复 */
.brand-panel .fas,
.auth-panel .fas,
.auth-panel .fab {
    font-display: swap;
    font-weight: 900 !important;
}

.brand-panel .fab,
.auth-panel .fab {
    font-weight: 400 !important;
}

/* 确保在慢网络环境下图标也能正确显示 */
@media (prefers-reduced-motion: reduce) {
    .fas, .far, .fab, .fal, .fa {
        animation: none;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .fas, .far, .fab, .fal, .fa {
        font-weight: 900 !important;
        text-shadow: none !important;
    }
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
    .fas, .far, .fab, .fal, .fa {
        color: inherit !important;
    }
}