/* Flag Icons - CSS-based fallback for emoji flags */

.flag-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 2px;
}

/* Flag backgrounds using CSS gradients as fallback */
.flag-icon.flag-us {
    background: linear-gradient(to bottom, #ff0000 0%, #ff0000 7.7%, #ffffff 7.7%, #ffffff 15.4%, #ff0000 15.4%, #ff0000 23.1%, #ffffff 23.1%, #ffffff 30.8%, #ff0000 30.8%, #ff0000 38.5%, #ffffff 38.5%, #ffffff 46.2%, #ff0000 46.2%, #ff0000 53.8%, #ffffff 53.8%, #ffffff 61.5%, #ff0000 61.5%, #ff0000 69.2%, #ffffff 69.2%, #ffffff 76.9%, #ff0000 76.9%, #ff0000 84.6%, #ffffff 84.6%, #ffffff 92.3%, #ff0000 92.3%);
    position: relative;
}
.flag-icon.flag-us::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 54%;
    background: #0052cc;
}

.flag-icon.flag-es {
    background: linear-gradient(to bottom, #ff0000 25%, #ffff00 25% 75%, #ff0000 75%);
}

.flag-icon.flag-fr {
    background: linear-gradient(to right, #0052cc 33%, #ffffff 33% 66%, #ff0000 66%);
}

.flag-icon.flag-de {
    background: linear-gradient(to bottom, #000000 33%, #ff0000 33% 66%, #ffff00 66%);
}

.flag-icon.flag-zh, .flag-icon.flag-cn {
    background: #ff0000;
    position: relative;
}
.flag-icon.flag-zh::before, .flag-icon.flag-cn::before {
    content: '★';
    position: absolute;
    top: 2px;
    left: 3px;
    color: #ffff00;
    font-size: 8px;
}

.flag-icon.flag-jp {
    background: #ffffff;
    position: relative;
    border: 1px solid #ddd;
}
.flag-icon.flag-jp::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 8px;
    height: 8px;
    background: #ff0000;
    border-radius: 50%;
}

.flag-icon.flag-ru {
    background: linear-gradient(to bottom, #ffffff 33%, #0052cc 33% 66%, #ff0000 66%);
}

.flag-icon.flag-sa, .flag-icon.flag-ar {
    background: #00aa00;
    position: relative;
}
.flag-icon.flag-sa::before, .flag-icon.flag-ar::before {
    content: '☪';
    position: absolute;
    top: 1px;
    left: 6px;
    color: #ffffff;
    font-size: 10px;
}

.flag-icon.flag-in, .flag-icon.flag-hi {
    background: linear-gradient(to bottom, #ff9933 33%, #ffffff 33% 66%, #00aa00 66%);
    position: relative;
}
.flag-icon.flag-in::before, .flag-icon.flag-hi::before {
    content: '⚪';
    position: absolute;
    top: 4px;
    left: 7px;
    color: #0052cc;
    font-size: 6px;
}

.flag-icon.flag-no, .flag-icon.flag-nb {
    background: #ff0000;
    position: relative;
}
.flag-icon.flag-no::before, .flag-icon.flag-nb::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #ffffff;
}
.flag-icon.flag-no::after, .flag-icon.flag-nb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 6px;
    width: 3px;
    height: 100%;
    background: #ffffff;
}

.flag-icon.flag-il, .flag-icon.flag-he {
    background: #ffffff;
    border: 1px solid #ddd;
    position: relative;
}
.flag-icon.flag-il::before, .flag-icon.flag-he::before {
    content: '✡';
    position: absolute;
    top: 2px;
    left: 6px;
    color: #0052cc;
    font-size: 8px;
}

.flag-icon.flag-lt {
    background: linear-gradient(to bottom, #ffff00 33%, #00aa00 33% 66%, #ff0000 66%);
}

.flag-icon.flag-pt {
    background: linear-gradient(to right, #00aa00 40%, #ff0000 40%);
    position: relative;
}

/* Emoji flag enhancement */
.emoji-flag-enhanced {
    position: relative;
    display: inline-block;
}

.emoji-flag-enhanced .flag-fallback {
    display: none;
}

/* Show fallback if emoji not supported */
@supports not (font-variant-emoji: emoji) {
    .emoji-flag-enhanced .emoji-content {
        display: none;
    }
    .emoji-flag-enhanced .flag-fallback {
        display: inline-block;
    }
}

/* Media query for systems with poor emoji support */
@media (prefers-reduced-motion: reduce) {
    .emoji-flag {
        font-family: system-ui, sans-serif;
    }
}