/* Language Flag Styles with Fallbacks */

/* Base flag icon style */
.flag-icon {
    display: inline-block;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Fallback colored rectangles when flag images are not available */
.flag-icon.fallback {
    position: relative;
    overflow: hidden;
}

/* Country-specific fallback colors */
.flag-icon[data-country="us"],
.flag-icon[data-country="en"] {
    background: linear-gradient(to bottom, #b22234 0%, #b22234 13%, #ffffff 13%, #ffffff 20%, #b22234 20%, #b22234 33%, #ffffff 33%, #ffffff 40%, #b22234 40%, #b22234 53%, #ffffff 53%, #ffffff 60%, #b22234 60%, #b22234 73%, #ffffff 73%, #ffffff 80%, #b22234 80%, #b22234 93%, #ffffff 93%, #ffffff 100%);
}

.flag-icon[data-country="my"],
.flag-icon[data-country="ms"] {
    background: linear-gradient(to bottom, #cc0001 0%, #cc0001 7%, #ffffff 7%, #ffffff 14%, #cc0001 14%, #cc0001 21%, #ffffff 21%, #ffffff 28%, #cc0001 28%, #cc0001 35%, #ffffff 35%, #ffffff 42%, #cc0001 42%, #cc0001 49%, #ffffff 49%, #ffffff 56%, #cc0001 56%, #cc0001 63%, #ffffff 63%, #ffffff 70%, #cc0001 70%, #cc0001 77%, #ffffff 77%, #ffffff 84%, #cc0001 84%, #cc0001 91%, #ffffff 91%, #ffffff 100%);
}

.flag-icon[data-country="cn"],
.flag-icon[data-country="zh"] {
    background: #de2910;
}

.flag-icon[data-country="sa"],
.flag-icon[data-country="ar"] {
    background: #006c35;
}

.flag-icon[data-country="es"] {
    background: linear-gradient(to bottom, #aa151b 0%, #aa151b 25%, #f1bf00 25%, #f1bf00 75%, #aa151b 75%, #aa151b 100%);
}

.flag-icon[data-country="fr"] {
    background: linear-gradient(to right, #002395 0%, #002395 33%, #ffffff 33%, #ffffff 66%, #ed2939 66%, #ed2939 100%);
}

.flag-icon[data-country="de"] {
    background: linear-gradient(to bottom, #000000 0%, #000000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%, #ffce00 100%);
}

.flag-icon[data-country="it"] {
    background: linear-gradient(to right, #009246 0%, #009246 33%, #ffffff 33%, #ffffff 66%, #ce2b37 66%, #ce2b37 100%);
}

.flag-icon[data-country="pt"] {
    background: linear-gradient(to right, #046a38 0%, #046a38 40%, #da020e 40%, #da020e 100%);
}

.flag-icon[data-country="ru"] {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 33%, #0039a6 33%, #0039a6 66%, #d52b1e 66%, #d52b1e 100%);
}

.flag-icon[data-country="jp"] {
    background: #ffffff;
    position: relative;
}

.flag-icon[data-country="jp"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    background: #bc002d;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.flag-icon[data-country="kr"] {
    background: #ffffff;
}

.flag-icon[data-country="th"] {
    background: linear-gradient(to bottom, #a51931 0%, #a51931 16%, #ffffff 16%, #ffffff 33%, #2d2a4a 33%, #2d2a4a 66%, #ffffff 66%, #ffffff 83%, #a51931 83%, #a51931 100%);
}

.flag-icon[data-country="vn"],
.flag-icon[data-country="vi"] {
    background: #da020e;
}

.flag-icon[data-country="id"] {
    background: linear-gradient(to bottom, #ff0000 0%, #ff0000 50%, #ffffff 50%, #ffffff 100%);
}

.flag-icon[data-country="in"],
.flag-icon[data-country="hi"] {
    background: linear-gradient(to bottom, #ff9933 0%, #ff9933 33%, #ffffff 33%, #ffffff 66%, #138808 66%, #138808 100%);
}

.flag-icon[data-country="bd"],
.flag-icon[data-country="bn"] {
    background: #006a4e;
    position: relative;
}

.flag-icon[data-country="bd"]::after,
.flag-icon[data-country="bn"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    width: 40%;
    height: 40%;
    background: #f42a41;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Default fallback style */
.flag-icon.error,
.flag-icon[data-country="flag"] {
    background: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), 
                linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #e0e0e0 75%), 
                linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    position: relative;
}

.flag-icon.error::after,
.flag-icon[data-country="flag"]::after {
    content: '???';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}

/* Size variants */
.flag-icon.flag-sm {
    width: 16px;
    height: 12px;
}

.flag-icon.flag-md {
    width: 20px;
    height: 15px;
}

.flag-icon.flag-lg {
    width: 24px;
    height: 18px;
}

.flag-icon.flag-xl {
    width: 32px;
    height: 24px;
}

/* Error handling for missing images */
.flag-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.flag-icon img[src*="FLAG.png"],
.flag-icon img[src=""],
.flag-icon img:not([src]) {
    display: none;
}

/* Add fallback data attribute when image fails to load */
.flag-icon img {
    display: block;
}

.flag-icon.has-fallback img {
    display: none;
}

/* Language selector specific styles */
.language-selector .flag-icon {
    width: 20px;
    height: 15px;
    flex-shrink: 0;
}

.language-dropdown .flag-icon {
    width: 24px;
    height: 18px;
    flex-shrink: 0;
}

/* Animation for flag loading */
@keyframes flagFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.flag-icon {
    animation: flagFadeIn 0.3s ease-out;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .flag-icon {
        border: 2px solid currentColor;
        filter: contrast(1.5);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .flag-icon {
        animation: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .flag-icon {
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .flag-icon.error,
    .flag-icon[data-country="flag"] {
        background: linear-gradient(45deg, #444444 25%, transparent 25%), 
                    linear-gradient(-45deg, #444444 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #444444 75%), 
                    linear-gradient(-45deg, transparent 75%, #444444 75%);
        background-size: 8px 8px;
        background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    }
}