/* ==========================================
   ACCORDION
   Стилі для акордеону
   ========================================== */

/* ==========================================
   BASE ACCORDION
   ========================================== */
.accordion {
  border-radius: var(--radius);
  overflow: hidden;
}

.accordion-item {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
}

.accordion-item:first-of-type {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.accordion-item:last-of-type {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.accordion-item:not(:first-of-type) {
  border-top: 0;
}

/* ==========================================
   ACCORDION BUTTON
   ========================================== */
.accordion-button {
  padding: 1rem 1.25rem;
  font-weight: 500;
  background-color: var(--bg-card);
  color: var(--text);
  transition: var(--transition);
}

.accordion-button:not(.collapsed) {
  background-color: var(--light);
  color: var(--primary);
  box-shadow: inset 0 -1px 0 var(--border);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--rgb-green-500), 0.25);
  border-color: var(--primary);
}

.accordion-button::after {
  transition: var(--transition);
}

/* ==========================================
   ACCORDION BODY
   ========================================== */
.accordion-body {
  padding: 1rem 1.25rem;
}

/* ==========================================
   DARK MODE - ACCORDION
   ========================================== */
body.dark-mode .accordion-item {
  background-color: var(--dark-surface);
  border-color: rgba(var(--rgb-white), 0.1);
}

body.dark-mode .accordion-button {
  background-color: var(--dark-surface);
  color: var(--light);
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: var(--dark-hover);
  color: var(--primary);
  box-shadow: inset 0 -1px 0 rgba(var(--rgb-white), 0.1);
}

body.dark-mode .accordion-button::after {
  filter: invert(1);
}

body.dark-mode .accordion-body {
  background-color: var(--dark-surface);
  color: var(--text-dark);
}