/**
 * @file
 * Minimal CSS for Collapsible Content module.
 * Blocks are OPEN by default.
 * Arrows point DOWN when expanded, RIGHT when collapsed.
 */

/* Стили применяются только к H2 внутри .box-collaps */
.box-collaps h2.collapsible-header {
  cursor: pointer;
  position: relative;
  padding-right: 25px !important; /* Место для стрелки */
}

/* Стрелка для ОТКРЫТОГО состояния (по умолчанию) - указывает ВНИЗ */
.box-collaps h2.collapsible-header:after {
  content: '▼';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.6;
}

/* Стрелка для ЗАКРЫТОГО состояния - указывает ВПРАВО */
.box-collaps h2.collapsible-header.collapsed:after {
  content: '▶';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.6;
}

/* Контент скрыт когда есть класс collapsed */
.box-collaps .collapsible-content.collapsed {
  display: none;
}

/* Контент виден когда нет класса collapsed (по умолчанию) */
.box-collaps .collapsible-content:not(.collapsed) {
  display: block;
}

/* Дополнительно: плавная анимация */
.box-collaps .collapsible-content {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.box-collaps .collapsible-content:not(.collapsed) {
  max-height: 10000px; /* Достаточно большое значение */
  opacity: 1;
}

.box-collaps .collapsible-content.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}