/* Language flags CSS */
.language-flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
    margin-right: 8px;
}

/* Vietnam */
.flag-vi {
    background-image: url('../images/flags/vn.png');
}

/* English */
.flag-en {
    background-image: url('../images/flags/en.png');
}

/* Chinese */
.flag-zh {
    background-image: url('../images/flags/zh.png');
}

/* Spanish */
.flag-es {
    background-image: url('../images/flags/es.png');
}

/* Japanese */
.flag-ja {
    background-image: url('../images/flags/ja.png');
}

/* Portuguese */
.flag-pt {
    background-image: url('../images/flags/pt.png');
}

/* Russian */
.flag-ru {
    background-image: url('../images/flags/ru.png');
}

/* Arabic */
.flag-ar {
    background-image: url('../images/flags/ar.png');
}

/* French */
.flag-fr {
    background-image: url('../images/flags/fr.png');
}

/* RTL support for Arabic */
[dir="rtl"] .language-flag {
    margin-right: 0;
    margin-left: 8px;
}

/* Hover effect */
.language-item:hover .language-flag {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Active state */
.language-item.active .language-flag {
    box-shadow: 0 0 0 2px #007bff;
}