/* --- Стили для верхней полосы --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Золотая середина: чуть светлее прошлого, но заметнее изначального */
    background-color: #d8edd9; 
    
    padding: 5px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.logo img {
    height: 44px;
    width: auto;
    display: block;
}

/* --- Блок выбора языка --- */
.lang-selector {
    display: flex;
    align-items: center;
    gap: 12px; /* Чуть увеличили отступ между глобусом и кнопками */
}

/* --- Настройки иконки планеты (глобуса) --- */
.lang-selector svg {
    /* Делаем иконку крупнее (в HTML было 20px) */
    width: 26px; 
    height: 26px; 
    
/* Идеальная гармония: берем цвет прямо из градиента кнопок */
    stroke: #5685d9;
    
    transition: transform 0.3s ease;
}

/* Легкое увеличение глобуса при наведении (по желанию) */
.lang-selector svg:hover {
    transform: scale(1.1);
}

/* --- ГЛЯНЦЕВЫЕ 3D КНОПКИ (Чуть выше и темнее) --- */
.lang-selector a {
    /* Меняем на inline-flex, чтобы при увеличении высоты текст всегда был ровно по центру */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    
    /* Слегка более темный и насыщенный синий градиент */
    background: linear-gradient(180deg, #7da1e8 0%, #5685d9 100%); 
    
    color: #ffffff;
    text-decoration: none;
    
    /* УВЕЛИЧИЛИ РАЗМЕР: 7px сверху/снизу (кнопка стала выше), 14px по бокам */
    padding: 7px 14px; 
    
    border-radius: 20px; 
    font-family: 'Arial', sans-serif;
    font-size: 10px; 
    font-weight: bold;
    line-height: 1; 
    
    /* Оставил одну аккуратную тень для текста */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 

    /* Эффект глянцевого стекла */
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.8), 
        inset 0 -2px 3px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.15); 
    
    transition: all 0.2s ease;
}

/* Эффект при наведении курсора */
.lang-selector a:hover {
    /* Чуть светлее нового темного фона */
    background: linear-gradient(180deg, #8baef0 0%, #6894e3 100%); 
}

/* Эффект при клике */
.lang-selector a:active {
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2), 
        0 1px 1px rgba(0, 0, 0, 0.1);
    transform: translateY(1px); 
}


/* --- АКТИВНАЯ КНОПКА ЯЗЫКА (Светло-зеленый фон) --- */

/* Если язык страницы RU, красим ПЕРВУЮ ссылку (RU) */
html[lang="ru"] .lang-selector a:nth-of-type(1),

/* Если язык страницы UZ, красим ВТОРУЮ ссылку (UZ) */
html[lang="uz"] .lang-selector a:nth-of-type(2) {
    
    /* Красивый светло-зеленый градиент */
    background: linear-gradient(180deg, #a8e0b0 0%, #6bc27b 100%);
    
    /* Делаем кнопку визуально "вдавленной", чтобы показать, что она нажата */
    box-shadow: 
        inset 0 3px 5px rgba(0, 0, 0, 0.2), 
        0 1px 1px rgba(255, 255, 255, 0.5);
    
    /* Фиксируем её в "нажатом" положении */
    transform: translateY(1px); 
    
    /* Отключаем возможность кликать на уже выбранный язык */
    pointer-events: none; 
}