/* Circular Flag SVG Adjustments */
.language-flag {
    background-color: #f0f0f0; /* Light background for flags */
    overflow: hidden;
    object-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Ensure flags are properly centered in circular frames */
.language-flag img,
.language-flag svg {
    width: 130%; /* Slightly larger to avoid white edges */
    height: 130%;
    object-fit: contain;
    transform-origin: center;
    max-width: none;
}

/* Flag-specific adjustments */
[data-lang="us"] .language-flag img { transform: scale(1.1); }
[data-lang="fr"] .language-flag img { transform: scale(1.1); }
[data-lang="es"] .language-flag img { transform: scale(1.1); }
[data-lang="de"] .language-flag img { transform: scale(1.1); }
[data-lang="it"] .language-flag img { transform: scale(1.1); }
[data-lang="pl"] .language-flag img { transform: scale(1.2); }
[data-lang="ru"] .language-flag img { transform: scale(1.1); }
[data-lang="ja"] .language-flag img { transform: scale(0.9); }
[data-lang="zh"] .language-flag img { transform: scale(1.1); }
[data-lang="ko"] .language-flag img { transform: scale(0.9); }

/* Adjust SVG viewBox for better circular display */
.language-option .language-flag svg {
    overflow: visible;
}

/* Increase visual pop with subtle gradient effects on hover */
.language-option:hover .language-flag {
    background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
}

/* Active flag effect */
.language-option.active .language-flag {
    transform: scale(1.05);
}

/* Shadow effects to enhance circular shape perception */
.language-flag::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
    pointer-events: none;
}