:root {
  --acc-accent-bg: #e6f1fb; /* expanded header fill          */
  --acc-accent-text: #0c447c; /* expanded header text & icon   */
  --acc-accent-dot: #185fa5; /* step-number bubble (expanded) */
  --acc-dot-bg: #dde8f0; /* step-number bubble (closed)   */
  --acc-dot-text: #4a6a82; /* step-number text (closed)     */
  --acc-body-bg: #fafcff; /* body background               */
  --acc-border: rgba(0, 0, 0, 0.09);
  --acc-shadow: none; /* cards stay flat               */
  --acc-radius: 10px;
  --acc-header-font-size: 0.9375rem; /* 15px                          */
  --acc-transition: 0.22s ease;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion-item {
  background: #ffffff;
  border: 0.5px solid var(--acc-border) !important;
  border-radius: var(--acc-radius) !important;
  box-shadow: var(--acc-shadow);
  overflow: hidden;
  margin-bottom: 0 !important;
}

.accordion-item:first-of-type,
.accordion-item:last-of-type,
.accordion-item:not(:first-of-type):not(:last-of-type) {
  border-radius: var(--acc-radius) !important;
}
.accordion-item:first-of-type .accordion-button,
.accordion-item:first-of-type .accordion-button.collapsed {
  border-radius: var(--acc-radius) var(--acc-radius) 0 0;
}

.accordion-header {
  margin: 0;
}

.accordion-button {
  background-color: #ffffff !important;
  color: #2c2c2a !important;
  font-size: var(--acc-header-font-size);
  font-weight: 500;
  padding: 13px 18px;
  border: none;
  border-radius: 0;
  box-shadow: none !important;
  transition:
    background-color var(--acc-transition),
    color var(--acc-transition);

  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  position: relative;
}

.accordion-button.bg-success,
.accordion-button.bg-primary {
  background-color: #ffffff !important;
}

.accordion {
  counter-reset: accordion-step;
}

.accordion-button::before {
  counter-increment: accordion-step;
  content: counter(accordion-step);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 24px;
  height: 24px;
  border-radius: 50%;

  background: var(--acc-dot-bg);
  color: var(--acc-dot-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;

  transition:
    background-color var(--acc-transition),
    color var(--acc-transition);
  order: -1;
}

.accordion-button::after {
  filter: brightness(0) saturate(100%) invert(38%) sepia(0%) saturate(0%)
    hue-rotate(0deg) brightness(90%);
  transition:
    transform var(--acc-transition),
    filter var(--acc-transition);
  margin-left: auto;
  flex-shrink: 0;
}

.accordion-button:not(.collapsed) {
  background-color: var(--acc-accent-bg) !important;
  color: var(--acc-accent-text) !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed)::before {
  background: var(--acc-accent-dot);
  color: #ffffff;
}

.accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%) invert(20%) sepia(60%) saturate(600%)
    hue-rotate(190deg) brightness(80%);
}

.accordion-button:focus {
  box-shadow: none !important;
  outline: 2px solid transparent;
}
.accordion-button:focus-visible {
  outline: 2px solid var(--acc-accent-dot);
  outline-offset: -2px;
}

.accordion-collapse {
}

.accordion-collapse.show,
.accordion-collapse.collapsing {
  border-top: 0.5px solid var(--acc-border);
}

.accordion-body {
  background-color: var(--acc-body-bg);
  padding: 18px 18px 20px;
  font-size: 0.9rem;
  color: #444441;
  line-height: 1.65;
}

.accordion-button.collapsed:hover {
  background-color: #eef5fc !important;
}