.trf-za{
    background-position:-24px 0;
}

.trf-al{
    background-position:-48px 0;
}

.trf-arabic{
    background-position:-72px 0;
}

.trf-by{
    background-position:-96px 0;
}

.trf-bg{
    background-position:-120px 0;
}

.trf-catalonia{
    background-position:-144px 0;
}

.trf-cn{
    background-position:-168px 0;
}

.trf-tw{
    background-position:-192px 0;
}

.trf-hr{
    background-position:-216px 0;
}

.trf-cz{
    background-position:-240px 0;
}

.trf-dk{
    background-position:-264px 0;
}

.trf-dutch{
    background-position:-288px 0;
}

.trf-ee{
    background-position:-312px 0;
}

.trf-fi{
    background-position:-336px 0;
}

.trf-french{
    background-position:-360px 0;
}

.trf-galicia{
    background-position:-384px 0;
}

.trf-de{
    background-position:-408px 0;
}

.trf-gr{
    background-position:-432px 0;
}

.trf-hebrew{
    background-position:-456px 0;
}

.trf-in{
    background-position:-480px 0;
}

.trf-hungary{
    background-position:-504px 0;
}

.trf-indonesia{
    background-position:-528px 0;
}

.trf-it{
    background-position:-552px 0;
}

.trf-is{
    background-position:-576px 0;
}

.trf-ie{
    background-position:-600px 0;
}

.trf-ja{
    background-position:-624px 0;
}

.trf-kr{
    background-position:-648px 0;
}

.trf-lv{
    background-position:-672px 0;
}

.trf-lt{
    background-position:-696px 0;
}

.trf-mk{
    background-position:-720px 0;
}

.trf-my{
    background-position:-744px 0;
}

.trf-mt{
    background-position:-768px 0;
}

.trf-no{
    background-position:-792px 0;
}

.trf-ir{
    background-position:-816px 0;
}

.trf-polish{
    background-position:-840px 0;
}

.trf-pt{
    background-position:-864px 0;
}

.trf-ro{
    background-position:-888px 0;
}

.trf-ru{
    background-position:-912px 0;
}

.trf-rs{
    background-position:-936px 0;
}

.trf-sk{
    background-position:-960px 0;
}

.trf-sl{
    background-position:-984px 0;
}

.trf-spanish{
    background-position:-1008px 0;
}

.trf-ke{
    background-position:-1032px 0;
}

.trf-se{
    background-position:-1056px 0;
}

.trf-ph{
    background-position:-1080px 0;
}

.trf-thai{
    background-position:-1104px 0;
}

.trf-turkish{
    background-position:-1128px 0;
}

.trf-ua{
    background-position:-1152px 0;
}

.trf-vn{
    background-position:-1176px 0;
}

.trf-wales{
    background-position:-1200px 0;
}

.trf-europeanunion{
    background-position:-1224px 0;
}


.trf {
background-image: url(/img/flags.png);
height: 11px;
width: 16px;
background-repeat: no-repeat;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}

.langname {
margin-left: 8px;
}


 /* 新增移动端下拉菜单样式 */
 .mobile-language-dropdown {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

.mobile-language-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}

.mobile-language-btn i {
    transition: transform 0.3s ease;
}

.mobile-language-btn.active i {
    transform: rotate(180deg);
}

.mobile-language-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.mobile-language-options.active {
    display: block;
}

.mobile-language-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-language-item:last-child {
    border-bottom: none;
}

.mobile-language-item:hover {
    background: #f1f5f9;
}

.mobile-language-item .flag {
    width: 24px;
    height: 18px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mobile-language-item .name {
    flex-grow: 1;
}


.language-selector {
    position: relative;
}

.language-dropdown {
    position: absolute;
    left: 0; /* 修改为左对齐 */
    top: 100%;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 0.5rem;
    min-width: 150px;
    width: 100%; /* 与按钮同宽 */
    z-index: 10;
    display: none;
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

.language-selector:hover .language-dropdown {
    display: block;
}

.language-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background 0.2s ease;
}

.language-item:hover {
    background: #f1f5f9;
}