/*
 * EMERGENCY FLAG FIX - IMMEDIATE EMOJI TO ICON CONVERSION
 * This CSS immediately fixes Windows emoji flag display issues
 * Version: 1.0.0 - Emergency Fix
 * Date: 2024-08-26
 */

/* ========================================
   IMMEDIATE FLAG EMOJI REPLACEMENTS
   ======================================== */

/* Hide emoji flags and replace with flag icons using CSS content */
.country-flag:not(.fi) {
    font-size: 0 !important; /* Hide emoji text */
    position: relative;
    display: inline-block !important;
    width: 48px !important;
    height: 32px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

/* Flag replacements using background images or CSS */
.country-flag:not(.fi):before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    font-size: 32px;
    line-height: 1;
    text-align: center;
    background-size: cover;
    background-position: center;
}

/* US Flag */
.country-flag:not(.fi)[title="United States"]:before,
.country-flag:not(.fi):contains("🇺🇸"):before {
    content: '';
    background: linear-gradient(to bottom, 
        #B22234 0%, #B22234 7.69%, 
        white 7.69%, white 15.38%, 
        #B22234 15.38%, #B22234 23.08%, 
        white 23.08%, white 30.77%, 
        #B22234 30.77%, #B22234 38.46%, 
        white 38.46%, white 46.15%, 
        #B22234 46.15%, #B22234 53.85%, 
        white 53.85%, white 61.54%, 
        #B22234 61.54%, #B22234 69.23%, 
        white 69.23%, white 76.92%, 
        #B22234 76.92%, #B22234 84.62%, 
        white 84.62%, white 92.31%, 
        #B22234 92.31%, #B22234 100%);
    position: relative;
}

.country-flag:not(.fi)[title="United States"]:after,
.country-flag:not(.fi):contains("🇺🇸"):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 53.85%;
    background: #3C3B6E;
}

/* Simplified approach: Use flag-icon-css classes directly */
.country-flag:not(.fi) {
    font-size: 0 !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
}

.country-flag:not(.fi):before {
    content: attr(data-flag) !important;
    font-family: "flag-icons" !important;
    font-size: 32px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* ========================================
   JAVASCRIPT-BASED SOLUTION FALLBACK
   ======================================== */

/* If JavaScript conversion fails, show text fallback */
.country-flag.conversion-failed {
    font-size: 14px !important;
    color: #0CE06B !important;
    background: rgba(12, 224, 107, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(12, 224, 107, 0.3) !important;
    font-weight: bold !important;
}

/* ========================================
   FLAG ICON INTEGRATION
   ======================================== */

/* Ensure flag icons display properly */
.fi {
    display: inline-block !important;
    width: 1.33em !important;
    height: 1em !important;
    background-size: cover !important;
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Size classes for flag icons */
.fi.fi-large {
    font-size: 48px !important;
}

.fi.fi-medium {
    font-size: 32px !important;
}

.fi.fi-small {
    font-size: 24px !important;
}

.fi.fi-xs {
    font-size: 16px !important;
}

/* ========================================
   RESPONSIVE FLAG SCALING
   ======================================== */

@media (max-width: 768px) {
    .fi {
        font-size: 24px !important;
    }
    
    .fi.fi-large {
        font-size: 32px !important;
    }
    
    .fi.fi-medium {
        font-size: 24px !important;
    }
    
    .fi.fi-small {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .fi {
        font-size: 20px !important;
    }
    
    .fi.fi-large {
        font-size: 28px !important;
    }
    
    .fi.fi-medium {
        font-size: 20px !important;
    }
    
    .fi.fi-small {
        font-size: 16px !important;
    }
}