/* =================
   ЦВЕТОВЫЕ ПЕРЕМЕННЫЕ ДЛЯ БЛОКА "ИЗБРАННЫЕ УРОКИ"
   ================= */

:root {
  /* Основные цвета блока */
  --favorites-bg: #1E1E1E;                /* Фон блока избранного */
  --favorites-bg-alt: #1E1E1E;            /* Альтернативный фон для других страниц */
  
  /* Цвета текста и заголовков */
  --favorites-title-color: #EBE5CF;        /* Цвет заголовка "Избранные уроки" */
  --favorites-link-color: #FFDA46;         /* Цвет ссылок на уроки */
  --favorites-link-hover: color-mix(in srgb, #FFDA46 30%, transparent); /* Подчеркивание при наведении */
  --favorites-text-edit: #EBE5CF;             /* Цвет текста в режиме редактирования */
  --favorites-header-star: #FFDA46;        /* Цвет звезды в заголовке */ 
  --favorites-header-arrow: #EBE5CF;          /* Цвет стрелки раскрытия/скрытия */ 
    
  /* Цвета кнопок и элементов управления */
  --favorites-btn-bg: color-mix(in srgb, #FFDA46 30%, transparent);            /* Фон кнопок "Изменить"/"Сохранить" */
  --favorites-btn-color: #FFDA46;          /* Цвет текста кнопок управления */
  
  /* Цвета звезды */
  --favorites-star-active: #FFDA46;        /* Цвет активной звезды (заполненной) */
  --favorites-star-inactive: transparent;   /* Цвет неактивной звезды (пустой) */
  
  /* Цвета кнопки избранного в плашке урока */
  --favorites-heart-bg: #3b3b3b;              /* Фон круглой кнопки избранного */
  --favorites-heart-shadow: rgba(0, 0, 0, 0.1); /* Тень кнопки избранного */
  
  /* Цвета режима удаления */
  --favorites-delete-hover-bg: #473939;    /* Фон при наведении в режиме удаления */
  --favorites-delete-icon: #ff6666;        /* Цвет иконки удаления */
}

/* Скрываем блок по-умолчанию. Если избранные есть — он покажется. */
.favorites-wrapper {
	display: none;
}

/* =================
   КНОПКИ ИЗБРАННОГО В СПИСКЕ УРОКОВ
   ================= */

/* Контейнер урока - для позиционирования кнопки избранного */
.lesson-list li {
  position: relative;
}

/* Основная кнопка избранного (большая круглая кнопка со звездой) */
.lesson-list li .favorites-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--favorites-heart-bg);
  box-shadow: 0 4px 4px 0 var(--favorites-heart-shadow);
  top: 10px;
  right: 10px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999999999;
  fill: var(--favorites-star-inactive); /* По умолчанию звезда пустая */
}

/* Звезда в неактивном состоянии (пустая) */
.lesson-list li .favorites-btn svg path {
  fill: var(--favorites-star-inactive);
}

/* Звезда в активном состоянии (заполненная оранжевым цветом) */
.lesson-list li .favorites-btn.active svg path {
  fill: var(--favorites-star-active);
}

/* Адаптация кнопки для страниц, где она должна быть меньше */
body:not(.isOneTrainingPage) .lesson-list li .favorites-btn {
  width: 30px;
  height: 30px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background-size: 17.86px;
  box-shadow: 0 3px 3px 0 var(--favorites-heart-shadow);
}


/* =================
   БЛОК ИЗБРАННЫХ УРОКОВ (ОСНОВНОЙ КОНТЕЙНЕР)
   ================= */

/* Основной блок с избранными уроками */
.favorites-wrapper {
  border-radius: 16px;
  background: var(--favorites-bg);
}

/* Адаптация фона блока для разных типов страниц */
body:not(.isOneTrainingPage, .isTrainingsPage) .favorites-wrapper {
  background: var(--favorites-bg-alt);
}


/* =================
   ЗАГОЛОВОК АККОРДЕОНА
   ================= */

/* Кликабельный заголовок для раскрытия/сворачивания списка */
.accordeon-header {
  cursor: pointer;
  padding: 30px 20px;
  transition: all .3s;
}

/* Заголовок блока избранного */
.favorites-wrapper h2 {
  font-family: 'Manrope';
  font-weight: 700;
  font-size: 20px;
  line-height: 140%;
  color: var(--favorites-title-color);
  display: flex;
  align-items: center;
  pointer-events: none; /* Клики обрабатывает родитель */
  user-select: none; /* Запрет выделения текста */
}

/* Иконка звезды перед заголовком */
.favorites-wrapper .favorites-header-star {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-right: 8px;
}

/* Стрелка раскрытия после заголовка */
.favorites-wrapper .favorites-header-arrow {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-left: auto;
  transition: all .3s;
}

/* Поворот стрелки при раскрытии аккордеона */
.favorites-wrapper.active .favorites-header-arrow {
  transform: rotate(180deg);
}


/* =================
   СПИСОК ИЗБРАННЫХ УРОКОВ
   ================= */

/* Контейнер списка избранных (скрыт по умолчанию) */
.favorites-wrapper .favorites-list {
  display: none;
  padding: 0px 20px 30px;
  margin-top: -20px; /* Компенсация отступа заголовка */
}

/* Обертка для каждого избранного урока */
.favorite-lesson-wrapper {
    transition: .3s all;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 5px;
    justify-content: space-between;
    border-radius: 6px;
}

/* Иконки в строке урока (ссылка и удаление) */
.favorite-lesson-icon {
  width: 20px;
  height: 20px;
  transition: .3s all;
  cursor: pointer;
}

/* Иконка ссылки (слева от названия урока) */
.favorite-lesson-icon--link {
  margin-right: 10px;
}

/* Кнопка удаления урока из избранного */
.favorite-remove {
  opacity: 1;
  display: none; /* Показывается только в режиме редактирования */
  cursor: pointer;
  transition: .3s all;
  margin-left: 10px;
}

/* Эффект при наведении на кнопку удаления */
.favorite-remove:hover {
  opacity: .6;
}

/* Ссылка на урок */
.favorite-lesson-wrapper a {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-family-2);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: var(--favorites-link-color);
  position: relative;
  transition: .3s all;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
  text-decoration-color: transparent !important; /* Подчеркивание скрыто по умолчанию */
  flex-grow: 1; /* Занимает все доступное пространство */
}

/* Эффект подчеркивания при наведении */
.favorite-lesson-wrapper:hover a {
  text-decoration-color: var(--favorites-link-hover) !important;
}


/* =================
   КНОПКИ УПРАВЛЕНИЯ
   ================= */

/* Кнопки "Редактировать" и "Сохранить" */
.favorites-wrapper .favorites-list .favorites-edit-btn,
.favorites-wrapper .favorites-list .favorites-save-btn {
  margin-top: 15px;
  background: var(--favorites-btn-bg);
  border-radius: 6px;
  border: 0;
  outline: 0;
  padding: 6px 12px;
  font-family: var(--font3);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: var(--favorites-btn-color);
  transition: .3s all;
}

/* Эффект при наведении на кнопки управления */
.favorites-wrapper .favorites-list .favorites-edit-btn:hover,
.favorites-wrapper .favorites-list .favorites-save-btn:hover {
  opacity: .8;
}

/* Кнопка "Сохранить" скрыта по умолчанию */
.favorites-wrapper .favorites-list .favorites-save-btn {
  display: none;
}


/* =================
   РЕЖИМ РЕДАКТИРОВАНИЯ (УДАЛЕНИЯ)
   ================= */

.favorites-wrapper.favorites-delete-mode .favorite-lesson-wrapper:hover {
  background: var(--favorites-delete-hover-bg);
}

/* Показать кнопки удаления в режиме редактирования */
.favorites-wrapper.favorites-delete-mode .favorite-remove {
  display: block;
}

/* Скрыть иконки ссылок в режиме редактирования */
.favorites-wrapper.favorites-delete-mode .favorite-lesson-icon--link {
  display: none;
}

/* Отключить клики по ссылкам и изменить цвет в режиме редактирования */
.favorites-wrapper.favorites-delete-mode .favorites-list a {
  pointer-events: none;
  color: var(--favorites-text-edit);
}

/* Показать кнопку "Сохранить" в режиме редактирования */
.favorites-wrapper.favorites-delete-mode .favorites-list .favorites-save-btn {
  display: block;
  margin-top: 20px;
}

/* Скрыть кнопку "Редактировать" в режиме редактирования */
.favorites-wrapper.favorites-delete-mode .favorites-list .favorites-edit-btn {
  display: none;
}


/* =================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ================= */

@media (max-width: 768px) {
  /* Адаптация позиции кнопки избранного на мобильных */
  .lesson-list li .favorites-btn {
    top: 20px;
    right: 20px;
  }
  
  /* Специальная адаптация для страниц, не являющихся одиночными тренингами */
  body:not(.isOneTrainingPage) .lesson-list li .favorites-btn {
    top: 10px;
    right: 10px;
    transform: translate(0); /* Сброс центрирования */
  }
}