/* Remove all Bootstrap accordion backgrounds and borders */
.accordion,
.accordion-item,
.accordion-header,
.accordion-button,
.accordion-button::after,
.accordion-collapse,
.accordion-body {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Add only a 1px bottom border under each header button */
.accordion-button {
  border-radius: 0 !important;
  border-bottom: 1px solid #ddd !important;
  padding: 1rem 1.25rem; /* adjust spacing if needed */
}

/* Remove default focus outline and use a subtle ring */
.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Hide the default accordion arrow if desired */
/* .accordion-button::after {
  display: none;
} */


/* Ensure the button is positioned for our icon */
.accordion-button {
  position: relative;
  padding-right: 2.5rem !important; /* make room on the right for the icon */
}

/* Hide the default Bootstrap arrow */
.accordion-button::after {
  display: none !important;
}

/* Add our Font Awesome icon */
.accordion-button::before {
  content: "\f107";                     /* fa-angle-down */
  font-family: "Font Awesome 5 Pro";    /* Pro family name */
  font-weight: 900;                     /* Pro Solid weight */
  position: absolute;
  right: 1rem;                          /* align with padding */
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

/* Swap to “up” icon when expanded */
.accordion-button:not(.collapsed)::before {
  content: "\f106";                     /* fa-angle-up */
}