/* Карточки уроков */
.c_lesson_card {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--c-bg-card);
    border: 2px solid var(--c-border);
    border-radius: 20px;
    margin-bottom: 10px;
    transition: transform 0.1s;
    min-height: 82px; /* Убедитесь, что это значение точное */
    scroll-margin-top: 120px; 
}

.c_lesson_card:active {
    transform: scale(0.98);
}

.c_lesson_card:hover {
    border-color: var(--c-accent-blue);
}

.c_lesson_icon {
    flex-shrink: 0;
    margin-right: 16px;
    width: 48px;
    height: 48px;
    background: var(--c-accent-green);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c_lesson_icon_char {
    flex-shrink: 0;
    margin-right: 16px;
    width: 48px;
    height: 48px;
    background: var(--c-accent-green);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c_lesson_icon_char img {
    border-radius: 12px;
    height: 32px;
    width: 32px;
}

.c_lesson_card_locked {
    opacity: 0.5;                /* Делаем всю карточку тусклой */
    pointer-events: none;        /* Запрещаем клики и ховер-эффекты */
    border-color: #2c2c2c;       /* Более темная рамка */
    box-shadow: none;
}

/* Перекрашиваем левую иконку в серый */
.c_lesson_card_locked .c_lesson_icon {
    background: #2c2c2c;         /* Темно-серый фон вместо зеленого */
    color: var(--c-text-muted);    /* Серая иконка */
}

.c_lesson_card_locked .c_lesson_icon_char img {
    filter: grayscale(1);       /* Делает изображение полностью чёрно-белым */
    opacity: 0.6;               /* Дополнительно: делаем персонажа чуть прозрачнее, чтобы он не "кричал" */
}

/* Также стоит изменить фон самого контейнера иконки для заблокированных уроков */
.c_lesson_card_locked .c_lesson_icon_char {
    background: #2c2c2c;         /* Меняем зеленый фон на темно-серый */
    border: 1px solid #3d3d3d;   /* Опционально: добавляем едва заметную рамку */
}

/* Стили для замка справа */
.c_lesson_lock {
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;                 /* Ширина как у c_check_circle для выравнивания */
}

.c_lesson_info {
    flex: 1;
    min-width: 0;
}

.c_lesson_name {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 2px;
}

.c_lesson_type {
    font-size: 11px;
    font-weight: 800;
    color: var(--c-text-muted);
    text-transform: uppercase;
}

/* Статус справа */
.c_lesson_status {
    display: flex;
    align-items: center;
    margin-left: 12px;
}

.c_stars {
    display: flex;
    margin-right: 12px;
}

.c_stars .g_icon {
    margin-right: 4px;
}

.c_stars .g_icon:last-child {
    margin-right: 0;
}

.c_star_gold {
    color: var(--c-accent-yellow);
}

.c_star_dark {
    color: #333333;
}

/* Чекбокс/Галочка */
.c_check_circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.c_check_circle_done {
    background: var(--c-accent-green);
}

.c_check_circle_empty {
    border: 2px solid var(--c-accent-green);
}



/* 2. Обязательно фиксируем размеры контейнеров иконок */
.c_lesson_icon, .c_lesson_icon_char {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

/* 3. Фиксируем картинки, чтобы они не "прыгали" при загрузке */
.c_lesson_icon_char img {
    width: 32px;
    height: 32px;
    display: block;
}