/*
 * COUNTRY FLAGS - CLEAN IMPLEMENTATION
 * Simple, effective CSS for country flag emoji display
 * Version: 1.0.0 - Clean Build
 * Date: 2024-08-26
 */

/* ========================================
   CORE COUNTRY FLAG STYLES
   ======================================== */

.country-flag {
    /* WINDOWS-FIRST EMOJI FONT OPTIMIZATION */
    font-family: 
        "Segoe UI Emoji",
        "Microsoft YaHei",
        "Segoe UI Symbol",
        "Apple Color Emoji",
        "Noto Color Emoji", 
        "Android Emoji",
        "EmojiSymbols",
        system-ui,
        -apple-system,
        sans-serif !important;
    
    /* CRITICAL: SIMPLE DISPLAY FOR EMOJI */
    display: inline-block !important;
    font-size: 32px !important;
    line-height: 1 !important;
    text-align: center !important;
    
    /* RESET ALL LAYOUT INTERFERENCE */
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    
    /* EMOJI RENDERING OPTIMIZATION */
    font-style: normal !important;
    font-weight: normal !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-variant-emoji: emoji !important;
    text-presentation: emoji !important;
    
    /* FORCE EMOJI RENDERING */
    unicode-bidi: isolate !important;
    white-space: nowrap !important;
    
    /* PREVENT INTERFERENCE */
    position: relative !important;
    z-index: 999 !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* ========================================
   RESPONSIVE SIZING
   ======================================== */

/* Desktop */
@media (min-width: 1024px) {
    .country-flag {
        font-size: 36px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .country-flag {
        font-size: 32px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .country-flag {
        font-size: 28px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .country-flag {
        font-size: 24px;
    }
}

/* ========================================
   CONTEXT-SPECIFIC SIZING
   ======================================== */

/* Large flags for headers/titles */
.country-flag.large {
    font-size: 48px;
}

/* Medium flags for cards */
.country-flag.medium {
    font-size: 32px;
}

/* Small flags for lists */
.country-flag.small {
    font-size: 20px;
}

/* Extra small flags for inline text */
.country-flag.xs {
    font-size: 16px;
}

/* ========================================
   CONTAINER CONTEXT
   ======================================== */

/* Country tabs in grid */
.country-tab .country-flag {
    font-size: 32px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Plan cards */
.plan-card .country-flag,
.popular-plan-card .country-flag {
    font-size: 28px !important;
}

/* Hero section */
.hero-section .country-flag {
    font-size: 40px !important;
}

/* Search results */
.search-result-item .country-flag,
.result-flag {
    font-size: 24px !important;
}

/* ========================================
   BROWSER COMPATIBILITY
   ======================================== */

/* Safari specific */
@supports (-webkit-appearance: none) {
    .country-flag {
        -webkit-font-feature-settings: "liga" on, "clig" on;
        -webkit-text-rendering: optimizeLegibility;
    }
}

/* Firefox specific */
@-moz-document url-prefix() {
    .country-flag {
        -moz-font-feature-settings: "liga" on, "clig" on;
    }
}

/* ========================================
   DARK/LIGHT THEME COMPATIBILITY
   ======================================== */

/* Ensure flags work in both themes */
body.light-theme .country-flag,
body:not(.light-theme) .country-flag,
.light-theme .country-flag,
:not(.light-theme) .country-flag {
    color: inherit;
    background: none;
    border: none;
    text-shadow: none;
    filter: none;
    -webkit-text-fill-color: unset;
    -webkit-background-clip: unset;
    background-clip: unset;
}

/* ========================================
   PERFORMANCE OPTIMIZATION
   ======================================== */

/* Prevent layout shifts */
.country-flag {
    will-change: auto;
    contain: layout style paint;
}

/* Reduce repaints */
.country-flag:not(:hover) {
    transform: none;
    transition: none;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Screen reader support */
.country-flag[aria-label],
.country-flag[title] {
    cursor: help;
}

/* Focus states for interactive flags */
.country-flag:focus {
    outline: 2px solid rgba(12, 224, 107, 0.5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ========================================
   UTILITIES
   ======================================== */

/* Remove any unwanted pseudo elements */
.country-flag::before,
.country-flag::after {
    display: none !important;
    content: none !important;
}

/* Prevent text selection on decorative flags */
.country-flag:not([tabindex]) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* Interactive flags */
.country-flag[tabindex],
.country-flag.interactive {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

/* ========================================
   ANIMATION SUPPORT (OPTIONAL)
   ======================================== */

/* Subtle hover effect for interactive flags */
.country-flag.interactive:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Loading state */
.country-flag.loading {
    opacity: 0.5;
    animation: flagPulse 1.5s ease-in-out infinite;
}

@keyframes flagPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* ========================================
   DEBUGGING (DEVELOPMENT ONLY)
   ======================================== */

/* ========================================
   EMERGENCY OVERRIDE SECTION
   Complete neutralization of all conflicts
   ======================================== */

/* FORCE OVERRIDE ALL POSSIBLE SELECTORS */
body .country-flag,
html body .country-flag,
.countries-grid .country-flag,
.country-tab .country-flag,
* .country-flag,
div .country-flag,
span.country-flag,
.country-flag,
[class*="country-flag"] {
    font-family: "Segoe UI Emoji", "Microsoft YaHei", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
    display: inline-block !important;
    font-size: 32px !important;
    line-height: 1 !important;
    text-align: center !important;
    
    /* RESET ALL LAYOUT PROPERTIES */
    width: auto !important;
    height: auto !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    
    /* RESET FLEX/GRID PROPERTIES */
    align-items: initial !important;
    justify-content: initial !important;
    flex-direction: initial !important;
    flex-shrink: initial !important;
    flex-grow: initial !important;
    aspect-ratio: initial !important;
    object-fit: initial !important;
    
    /* RESET TEXT PROPERTIES */
    text-shadow: none !important;
    filter: none !important;
    -webkit-text-fill-color: initial !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: inherit !important;
    
    /* FORCE EMOJI PROPERTIES */
    font-style: normal !important;
    font-weight: normal !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-variant-emoji: emoji !important;
    text-presentation: emoji !important;
    unicode-bidi: isolate !important;
    white-space: nowrap !important;
    
    /* POSITION RESET */
    position: relative !important;
    z-index: 999 !important;
}

/* REMOVE ALL PSEUDO ELEMENTS */
.country-flag::before,
.country-flag::after,
body .country-flag::before,
body .country-flag::after,
* .country-flag::before,
* .country-flag::after {
    display: none !important;
    content: none !important;
    position: absolute !important;
    visibility: hidden !important;
}

/* WINDOWS EMOJI FONT LOADING */
@font-face {
    font-family: 'EmojiForce';
    src: local('Segoe UI Emoji'), local('Microsoft YaHei'), local('Apple Color Emoji');
    unicode-range: U+1F1E6-1F1FF; /* Flag emoji range */
}

/* ALTERNATIVE SELECTOR FOR STUBBORN CASES */
.country-flag,
span[class*="flag"],
[data-flag],
.flag-emoji {
    font-family: 'EmojiForce', "Segoe UI Emoji", "Microsoft YaHei", "Apple Color Emoji" !important;
}