/* Accordion container and items */
.accordion {
  background-color: transparent;
}

.accordion-item {
  background-color: var(--white) !important;
  border: solid 1px var(--greyDarker) !important;
  border-radius: 8px !important;
  margin-bottom: 1rem !important;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.accordion-item:hover,
.accordion-item:focus-within {
  border-color: var(--qridaOrange) !important;
  box-shadow: 0 4px 8px rgba(0, 94, 184, 0.1);
}

/* Accordion button/header - light grey background */
.accordion-button {
  background-color: var(--greyLighter, #f5f5f5) !important;
  color: var(--textColor) !important;
  font-weight: var(--font-weight-semibold) !important;
  padding: 1.25rem 1.5rem !important;
  border: none !important;
}

.accordion-button:not(.collapsed) {
  color: var(--qridaOrange) !important;
  background-color: var(--greyLighter, #f5f5f5) !important;
  box-shadow: none !important;
  border-bottom: solid 1px var(--greyLight) !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  outline: var(--focus-ring) !important;
  outline-offset: 2px;
}

.accordion-button:hover {
  background-color: var(--greyLight, #e8e8e8) !important;
}

/* Accordion chevron icons */
.accordion-button::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23005EB8" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
}

.accordion-button:not(.collapsed)::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23005EB8" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
  transform: rotate(-180deg);
}

/* Accordion body/content */
.accordion-body {
  background-color: var(--white) !important;
  padding: 1.5rem !important;
  color: var(--textColor) !important;
  border: none !important;
}

/* Accordion collapse transition */
.accordion-collapse {
  background-color: var(--white) !important;
  border: none !important;
}