/* 
 * FONTAWESOME ICON FIXES AND FALLBACKS
 * This file ensures FontAwesome icons display properly and provides fallbacks
 * Updated: August 8, 2025
 */

/* Reset FontAwesome display - REMOVED the display:none that was breaking icons */
.fas, .far, .fab, .fal, .fa {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", initial;
    font-style: normal;
    font-weight: 900; /* FontAwesome solid weight */
    line-height: 1;
    display: inline-block !important; /* Override the previous display:none */
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

/* Brand icons weight */
.fab {
    font-weight: 400;
}

/* Regular icons weight */
.far {
    font-weight: 400;
}

/* Light icons weight */
.fal {
    font-weight: 300;
}

/* Fallback for when FontAwesome completely fails to load */
@supports not (font-family: "Font Awesome 6 Free") {
    
    /* Common icons with Unicode fallbacks */
    .fa-check-circle::before,
    .fas.fa-check-circle::before {
        content: "✓";
        color: #28a745;
        font-weight: bold;
        font-family: Arial, sans-serif;
    }

    .fa-times-circle::before,
    .fas.fa-times-circle::before {
        content: "✗";
        color: #dc3545;
        font-weight: bold;
        font-family: Arial, sans-serif;
    }

    .fa-file-alt::before,
    .fas.fa-file-alt::before {
        content: "📄";
        font-family: Arial, sans-serif;
    }

    .fa-user::before,
    .fas.fa-user::before {
        content: "👤";
        font-family: Arial, sans-serif;
    }

    .fa-book-open::before,
    .fas.fa-book-open::before {
        content: "📖";
        font-family: Arial, sans-serif;
    }

    .fa-download::before,
    .fas.fa-download::before {
        content: "⬇";
        font-family: Arial, sans-serif;
    }

    .fa-info-circle::before,
    .fas.fa-info-circle::before {
        content: "ℹ";
        color: #17a2b8;
        font-family: Arial, sans-serif;
    }

    .fa-eye::before,
    .fas.fa-eye::before {
        content: "👁";
        font-family: Arial, sans-serif;
    }

    .fa-cloud-download-alt::before,
    .fas.fa-cloud-download-alt::before {
        content: "⬇";
        font-family: Arial, sans-serif;
    }
}

/* Additional icon fallbacks that work even when FontAwesome loads */
.fa-envelope::before,
.fas.fa-envelope::before {
    font-family: "Font Awesome 6 Free", Arial, sans-serif;
}

.fa-search::before,
.fas.fa-search::before {
    font-family: "Font Awesome 6 Free", Arial, sans-serif;
}

.fa-phone::before,
.fas.fa-phone::before {
    font-family: "Font Awesome 6 Free", Arial, sans-serif;
}

.fa-facebook::before,
.fab.fa-facebook::before {
    font-family: "Font Awesome 6 Brands", Arial, sans-serif;
}

.fa-instagram::before,
.fab.fa-instagram::before {
    font-family: "Font Awesome 6 Brands", Arial, sans-serif;
}

.fa-youtube::before,
.fab.fa-youtube::before {
    font-family: "Font Awesome 6 Brands", Arial, sans-serif;
}

.fa-linkedin::before,
.fab.fa-linkedin::before {
    font-family: "Font Awesome 6 Brands", Arial, sans-serif;
}

.fa-twitter::before,
.fab.fa-twitter::before {
    font-family: "Font Awesome 6 Brands", Arial, sans-serif;
}

.fa-whatsapp::before,
.fab.fa-whatsapp::before {
    font-family: "Font Awesome 6 Brands", Arial, sans-serif;
}

.fa-heart::before,
.fas.fa-heart::before,
.far.fa-heart::before {
    font-family: "Font Awesome 6 Free", Arial, sans-serif;
}

.fa-star::before,
.fas.fa-star::before,
.far.fa-star::before {
    font-family: "Font Awesome 6 Free", Arial, sans-serif;
}

/* Icon sizing and alignment utilities */
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 0.875rem; }
.icon-lg { font-size: 1.25rem; }
.icon-xl { font-size: 1.5rem; }
.icon-2x { font-size: 2rem; }
.icon-3x { font-size: 3rem; }

/* Color utilities for icons */
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info { color: #17a2b8 !important; }
.text-primary { color: #007bff !important; }
.text-muted { color: #6c757d !important; }

/* Ensure icons are properly aligned */
.fas, .far, .fab, .fal, .fa {
    vertical-align: middle;
    line-height: inherit;
}

/* Fix for icons in buttons */
.btn .fas, .btn .far, .btn .fab, .btn .fal, .btn .fa {
    margin-right: 0.25rem;
}

.btn .fas:last-child, .btn .far:last-child, .btn .fab:last-child, .btn .fal:last-child, .btn .fa:last-child {
    margin-right: 0;
    margin-left: 0.25rem;
}

/* Improve icon loading */
.fas, .far, .fab, .fal, .fa {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}