/* Accordion wrapper */
.accordion {
  border: none;       /* Remove outer border */
  border-radius: 0;
  margin-bottom: 20px;
  font-family: sans-serif;
}

/* Add space between accordion items */
.accordion__item {
  /* optional separation line */
  margin-bottom: 10px;           /* bigger gap between items */
}

/* Last item no bottom margin */
.accordion__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}


/* Hide the radio/checkbox inputs used for accordion functionality */
.accordion__item input[type="checkbox"],
.accordion__item input[type="radio"] {
  display: none;
}

/* Accordion header */
.accordion__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 12px 15px;
  background: #f7f7f7;
  font-weight: bold;
  transition: background 0.3s;
  position: relative;
  margin-bottom: 0px !important;
  color: black !important;
}

.accordion__title:hover {
  background: #eaeaea;
}

/* Arrow indicator */
.accordion__title::after {
  content: "▸"; /* Right-pointing arrow */
  transition: transform 0.3s;
  margin-left: auto;
}

/* Rotate arrow when active */
.accordion__item.active > .accordion__title::after {
  transform: rotate(90deg); /* Down-pointing arrow */
}

/* Panel styling when expanded */
.accordion__item.active > .panel {
  display: block;
  border: 1px solid #ddd;      /* Add border around panel */
  border-top: none;            /* Remove double border with header */
  border-radius: 0 0 4px 4px;  /* Rounded bottom corners */
  padding: 10px 15px;          /* Keep padding */
  background: #fff;            /* Ensure background is white */
}

.accordion__item.active > .accordion__title {
  border-bottom: none; /* Remove bottom border on header when open */
}


/* Accordion panel (hidden by default) */
.panel {
  display: none;
  padding: 10px 15px;
  background: #fff;
}

/* Remove bullets from panel ULs */
.accordion__wrapper,
.accordion__wrapper ul.panel {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Panel list items spacing */
.panel li {
  padding: 5px 0;
}