/*
 * accordion-override.css
 * Drop-in Bootstrap 5 accordion override — Soft & Professional style
 * No HTML changes required. Link this AFTER your Bootstrap CSS.
 *
 * Colour tokens (edit here to retheme globally)
 */
: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;
}


/* ─── Wrapper ──────────────────────────────────────────────────── */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ─── Item card ─────────────────────────────────────────────────── */
.accordion-item {
  background: #ffffff;
  border: 0.5px solid var(--acc-border) !important; /* override BS default */
  border-radius: var(--acc-radius) !important;
  box-shadow: var(--acc-shadow);
  overflow: hidden;
  /* remove Bootstrap's border-top-only styling on siblings */
  margin-bottom: 0 !important;
}

/* BS5 removes radius on all but first/last — restore it everywhere */
.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;
}


/* ─── Header ────────────────────────────────────────────────────── */
.accordion-header {
  margin: 0;
}


/* ─── Button (collapsed / default state) ───────────────────────── */
.accordion-button {
  /* reset Bootstrap defaults */
  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);

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

  /* remove the default bg-success / bg-primary classes' tint —
     those inline Bootstrap utilities will still apply unless we
     raise specificity; !important handles both */
}

/* Suppress Bootstrap's bg-opacity utility colour bleed on the button */
.accordion-button.bg-success,
.accordion-button.bg-primary {
  background-color: #ffffff !important;
}


/* Step-number bubble — injected via ::before using the data-step
   attribute on each .accordion-button, OR positioned using
   CSS counter so NO HTML change is needed. */
.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);

  /* must come before the label text */
  order: -1;
}

/* Bootstrap renders its own chevron via ::after — restyle it */
.accordion-button::after {
  /* keep Bootstrap's chevron SVG but recolour to match muted state */
  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;          /* push chevron to the far right     */
  flex-shrink: 0;
}


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

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

/* Expanded chevron — tint to accent green */
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%)
          invert(20%) sepia(60%) saturate(600%) hue-rotate(190deg) brightness(80%);
}

/* Remove the Bootstrap focus ring (keep accessibility via outline on keyboard) */
.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;
}


/* ─── Collapse panel ────────────────────────────────────────────── */
.accordion-collapse {
  /* border-top appears when body opens */
}

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


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


/* ─── Hover state on collapsed buttons ─────────────────────────── */
.accordion-button.collapsed:hover {
  background-color: #EEF5FC !important;
}