/* від Квазара: он объединил механизмы управления иконками в названиях секций и стрелками */
/* + единственный уровень вложенности !         */


/* .accordion-header[data-style="custom1"].open {
    background-color: #f7f7f7;   
    color: #000000;           
}
*/



.accordion {
  width: 100%;
/*  max-width: 600px; */
  margin: 5px auto;                /* поменял 20 на 5 */
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}



.accordion-section {
  border-bottom: 1px solid #ccc;
}




.accordion-header[data-style="custom1"].open {
    background-color: #f7f7f7;   
    color: #000000;           
}


/* Стандартний стиль для всіх accordion-header */
.accordion-header {
  padding: 15px;
  background-color: #f7f7f7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Вирівнюємо елементи зліва */
  gap: 10px;
  position: relative; /* Додаємо для абсолютного позиціонування стрілки */
}

/* Особливий стиль для заголовків з data-style="custom1" */
.accordion-header[data-style="custom1"] {
    background-color: #56698f; /* main колір сайту */
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;  /* для плавного переходу */
}

.accordion-section.open .accordion-header[data-style="custom1"] {
    background-color: #f7f7f7;              /* !important додано шоб підняти ПРИОРИТЕТ (інакше не робить) */
    color: #000000;                         /* !important додано шоб підняти ПРИОРИТЕТ (інакше не робить) */
}



.accordion-header .arrow {
  position: absolute;
  right: 15px; /* Притискає стрілку до правого краю заголовка */
}


.accordion-header .arrow {
  margin-left: auto; /* Жорстко притискає стрілку до правого краю */
}
.accordion-header span {
  margin-left: 5px; /* Відступ між іконкою та текстом */
  flex-grow: 1; /* Дозволяє тексту займати всю доступну область */
}

.accordion-header .arrow {
  margin-left: auto; /* Жорстко притискає стрілку до правого краю */
}


.accordion-header span {
  margin-left: 5px; /* Відстань між іконкою та текстом */
  flex-grow: 1; /* Дозволяє тексту займати всю доступну область */
}

.accordion-header img {
/*  width: 24px;  Розмір іконок 
  height: 24px;   */
}

.accordion-header .opened-img {
  display: none; /* Приховуємо іконку відкритої секції за замовчуванням */
}

.accordion-content {
  padding: 7px;              /* было 15 */
  display: none;
  background-color: #fff;
  transition: max-height 0.3s ease-out;
}

.accordion-content.open {
  display: block;
}

/* Відображення потрібної іконки при відкритті */
.accordion-section.open .closed-img {
  display: none;
}

.accordion-section.open .opened-img {
  display: inline;
}

/* Стиль для стрілочок (обертання на 180°) */
.accordion-header .arrow {
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.accordion-section.open .arrow {
  transform: rotate(-180deg); /* Міняємо напрямок стрілки */
}


/*
div[data-bg="Accordion"] {
    background-image: url('images/newspaper1.png'); /* Шлях до вашого фонового зображення 
    background-color: #DDDDDD;          /*  колір для фону  
    padding: 5px;
   /* 	margin-top: 5px;
    	margin-bottom: 5px;  
}

div[data-bg="Accordion2"] {
    background-image: url('images/TV.png'); /* Шлях до вашого фонового зображення 
    background-color: #DDDDDD;          /*  колір для фону   
    padding: 5px;
   /* 	margin-top: 5px;
    	margin-bottom: 5px;   
}

div[data-bg="Accordion3"] {
    background-color: #947312;          /*  колір для фону   
    padding: 5px;
   /* 	margin-top: 5px;
    	margin-bottom: 5px;   
}
*/