/* ============================================
   УНИВЕРСАЛЬНЫЕ СПОЙЛЕРЫ (details.etap-item)
   Стили — здесь. Логика — /js/spoilers.js.
   ============================================ */

details.etap-item {
  padding: 0;
  margin: 5px 0;
}

details.etap-item > summary.etap-summary {
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 10px 15px;
  border-radius: 10px;
  transition: background-color var(--transition-base), border-radius var(--transition-base);
}

details.etap-item > summary.etap-summary > h3 {
  margin: 0;
}

/* Скрываем встроенный маркер <summary> во всех браузерах */
details.etap-item > summary.etap-summary::-webkit-details-marker,
details.etap-item > summary.etap-summary::marker {
  display: none;
  content: "";
}

details.etap-item > .etap-content {
  margin: 0;
  padding: 15px 15px 15px 25px;
  border-radius: 0 0 10px 10px;
}

/* ============================================
   ИКОНКА ПЕРЕД ЗАГОЛОВКОМ <summary>
   Показывается ТОЛЬКО если у <summary> есть атрибут data-spoiler-icon.
   URL иконки задаётся из PHP через CSS-переменную --spoiler-icon.
   ============================================ */
details.etap-item > summary.etap-summary[data-spoiler-icon] {
  position: relative;
  padding-left: 40px;
}

details.etap-item > summary.etap-summary[data-spoiler-icon]::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: var(--spoiler-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}