/* Автор скрипта - Александр Нагиян */
/* ТГ-канал - https://t.me/nagiyan_gc */
/* Магазин готовых решений - https://script-shop.ru/main?utm_source=school&utm_content=lesson-themes */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  --color1:#fff; /*Цвет фона блока*/
  --color2:#343434; /*Цвет текста*/
  --color3:#f3f5f7; /*Цвет границы и фона темы*/
  --color4:#81ABE9; /*Цвет границы и фона активной темы*/
  --color5:#fff; /*Цвет текста активной темы*/
}

.lesson-themes-block {
  padding: 20px;
  border-radius:12px;
  box-shadow: none;
  background:var(--color1);
  margin-bottom:20px;
}

.lesson-themes-block h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 130%;
  color:var(--color2);
  margin-bottom:20px;
}

.lesson-themes-list {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.lesson-themes-list div {
  cursor:pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  color:var(--color2);
  padding: 5px 15px;
  border-radius:50px;
  background:var(--color3);
  border:1px solid var(--color3);
  transition:all .3s;
}

.lesson-themes-list div:hover {
  border-color:var(--color4)
}

.lesson-themes-list div.active-theme {
  background:var(--color4);
  color:var(--color5);
  border-color:var(--color4);
}

/* === Кнопка скрытия/показа фильтров (адаптация под текущий стиль) === */
.toggle-filters,
.filter-toggle-btn {
  display: none; /* на десктопе скрыта */
  cursor:pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  color:var(--color2);
  padding: 8px 15px;
  border-radius: 50px;
  background:var(--color3);
  border:1px solid var(--color3);
  transition:all .3s;
  margin-bottom: 12px; /* небольшой отступ от заголовка/верхних элементов */
  text-align: center;
  user-select: none;
}

.toggle-filters:hover,
.filter-toggle-btn:hover {
  border-color:var(--color4);
}

.toggle-filters:focus,
.filter-toggle-btn:focus {
  outline: none;
}

/* Активное состояние кнопки (когда фильтры раскрыты — задавайте класс через JS) */
.toggle-filters--active,
.filter-toggle-btn--active {
  background: var(--color4);
  color: var(--color5);
  border-color: var(--color4);
}

/* === Мобильное поведение === */
@media (max-width: 768px) {
  /* по умолчанию на мобильных список скрыт, кнопка видна */
  .lesson-themes-block .toggle-filters,
  .lesson-themes-block .filter-toggle-btn {
    display: block;
    width: 100%;
  }

  .lesson-themes-list {
    display: none; /* будет показан/скрыт через JS slideToggle */
  }

  /* Дополнительно: когда список открыт, можно добавлять класс на блок для плавности, если используете не slideToggle */
  .lesson-themes-block.is-open .lesson-themes-list {
    display: flex;
  }
}

/* Предпочтение пользователю: без анимаций */
@media (prefers-reduced-motion: reduce) {
  .lesson-themes-list div,
  .toggle-filters,
  .filter-toggle-btn {
    transition: none;
  }
}