/* ========================================================================== */
/* --- СТИЛИ ДЛЯ КНОПОК ВОСПРОИЗВЕДЕНИЯ АУДИО --- */
/* ========================================================================== */

.audio-play-button {
    background-color: var(--green-overlay-color); /* Темная полупрозрачная подложка */
    color: greenyellow;
    border: none;
    width: 20px;
    height: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px; /* Размер шрифта для символа */
    margin-left: 5px; /* Отступ слева от текста чекбокса */
    cursor: pointer;
    border-radius: 3px; /* Слегка закругленные углы */
    line-height: 1; /* Для вертикального центрирования символа */
    vertical-align: middle; /* Выравнивание по центру с текстом */
    flex-shrink: 0; /* Не давать кнопке сжиматься */
    box-sizing: border-box; /* Учитывать padding/border в width/height */
    display: flex; /* Для центрирования символа */
    align-items: center; /* Центрирование символа */
    justify-content: center; /* Центрирование символа */
    margin-left: 0px;
}

.audio-play-button:hover {
    background-color: #45a049; /* Темнее при наведении */
}

/* ========================================================================== */
/* --- СТИЛИ ДЛЯ кнопки переключения языка --- */
/* ========================================================================== */

.language-toggle {
    position: fixed; /* Фиксированное позиционирование */
    top: 20px; /* Отступ сверху */
    right: 20px; /* Отступ справа */
    z-index: 1000; /* Поверх всех элементов */
    padding: 10px 15px;
    background-color: var(--color-primary); /* Используйте вашу переменную для основного цвета */
    color: var(--color-text); /* Цвет текста */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.language-toggle:hover {
    background-color: var(--color-primary-dark); /* Более темный оттенок при наведении */
    transform: translateY(-2px);
}

.language-toggle:active {
    transform: translateY(0);
}