/* =========================================================
   StinkBugs / PageBuilder Accordion
   Dark-mode tuned + token-driven
   ========================================================= */

.sb-accordion,
.pb-accordion {
    padding-left: 2px;
    padding-right: 2px;
    box-sizing: border-box;
    overflow-x: hidden; /* prevent edge clipping */
}

/* Full width */
.sb-accordion .accordion,
.pb-accordion .accordion {
    width: 100%;
    max-width: 100%;
}

/* ---------------------------------------------------------
   Token defaults (if no color mode class is applied)
   --------------------------------------------------------- */

.sb-accordion,
.pb-accordion {
    /* Base surfaces derived from global StinkBugs tokens */
    --sb-acc-header-bg: var(--sb-surface-2, #eef2ff);
    --sb-acc-header-color: var(--sb-text, #101828);

    --sb-acc-body-bg: var(--sb-surface, #ffffff);
    --sb-acc-body-color: var(--sb-text-muted, #475467);

    --sb-acc-border-color: var(--sb-border, rgba(16, 24, 40, 0.14));
    --sb-acc-border-w: 1px;

    /* Interaction */
    --sb-acc-hover-bg: rgba(37, 99, 235, 0.10); /* light hover wash */
    --sb-acc-active-bg: rgba(37, 99, 235, 0.14);
    --sb-acc-focus-ring: var(--sb-focus, 0 0 0 3px rgba(37, 99, 235, 0.28));
}

/* Dark mode defaults */
html[data-theme="dark"] .sb-accordion,
html[data-theme="dark"] .pb-accordion {
    --sb-acc-header-bg: var(--sb-surface-2, #172445);
    --sb-acc-header-color: var(--sb-text, #eaf0ff);

    --sb-acc-body-bg: var(--sb-surface, #111a2e);
    --sb-acc-body-color: var(--sb-text-muted, rgba(234,240,255,0.72));

    --sb-acc-border-color: var(--sb-border, rgba(234, 240, 255, 0.14));

    --sb-acc-hover-bg: rgba(122, 162, 255, 0.14);
    --sb-acc-active-bg: rgba(122, 162, 255, 0.18);
}

/* ---------------------------------------------------------
   Structure, borders, rounding
   --------------------------------------------------------- */

.sb-accordion .accordion-item,
.pb-accordion .accordion-item {
    border-width: var(--sb-acc-border-w, 1px);
    border-style: solid;
    border-color: var(--sb-acc-border-color, rgba(0, 0, 0, 0.125));
    border-radius: .75rem;
    overflow: hidden; /* important: keeps header/body corners clean */
    background: transparent;
}

/* Button weight + rounding */
.sb-accordion .accordion-button,
.pb-accordion .accordion-button {
    font-weight: 600;
    border-radius: 0; /* item handles rounding */
    max-width: 100%;
}

/* Header look */
.sb-accordion .accordion-button,
.pb-accordion .accordion-button {
    background-color: var(--sb-acc-header-bg, #f8f9fa);
    color: var(--sb-acc-header-color, #212529);
    border: 0; /* we rely on item border */
}

/* Body look */
.sb-accordion .accordion-body,
.pb-accordion .accordion-body {
    background-color: var(--sb-acc-body-bg, #ffffff);
    color: var(--sb-acc-body-color, #495057);
}

/* Remove Bootstrap default “hard white” styles bleeding through */
.sb-accordion .accordion-button:not(.collapsed),
.pb-accordion .accordion-button:not(.collapsed) {
    background-color: var(--sb-acc-active-bg, rgba(37,99,235,0.14));
    color: var(--sb-acc-header-color, #212529);
    box-shadow: none;
}

/* Hover states */
.sb-accordion .accordion-button:hover,
.pb-accordion .accordion-button:hover {
    background-color: var(--sb-acc-hover-bg, rgba(37,99,235,0.10));
}

/* Focus ring: crisp and visible in both themes */
.sb-accordion .accordion-button:focus,
.pb-accordion .accordion-button:focus {
    outline: none;
    box-shadow: var(--sb-acc-focus-ring);
    position: relative;
    z-index: 2;
}

/* Divider line between header and body in an open item */
.sb-accordion .accordion-collapse,
.pb-accordion .accordion-collapse {
    border-top: 1px solid var(--sb-acc-border-color, rgba(0,0,0,0.125));
}

/* ---------------------------------------------------------
   Chevron / icon tuning (Bootstrap uses ::after)
   --------------------------------------------------------- */

/* Ensure icon inherits readable color in dark mode */
.sb-accordion .accordion-button::after,
.pb-accordion .accordion-button::after {
    filter: none;
    opacity: 0.85;
}

/* In dark mode, Bootstrap’s chevron often looks washed out */
html[data-theme="dark"] .sb-accordion .accordion-button::after,
html[data-theme="dark"] .pb-accordion .accordion-button::after {
    opacity: 0.95;
}

/* ---------------------------------------------------------
   Color modes (applied to wrapper via JS)
   These define variables; dark-mode overrides follow below.
   --------------------------------------------------------- */

/* DEFAULT */
.sb-acc-color-default,
.pb-acc-color-default {
    --sb-acc-header-bg: var(--sb-surface-2, #eef2ff);
    --sb-acc-header-color: var(--sb-text, #101828);
    --sb-acc-body-bg: var(--sb-surface, #ffffff);
    --sb-acc-body-color: var(--sb-text-muted, #475467);
    --sb-acc-border-color: var(--sb-border, rgba(16,24,40,0.14));
}

/* SOFT (blue tint) */
.sb-acc-color-soft,
.pb-acc-color-soft {
    --sb-acc-header-bg: rgba(37, 99, 235, 0.12);
    --sb-acc-header-color: var(--sb-text, #101828);
    --sb-acc-body-bg: var(--sb-surface, #ffffff);
    --sb-acc-body-color: var(--sb-text-muted, #475467);
    --sb-acc-border-color: rgba(37, 99, 235, 0.25);
}

/* MUTED (neutral) */
.sb-acc-color-muted,
.pb-acc-color-muted {
    --sb-acc-header-bg: rgba(16, 24, 40, 0.06);
    --sb-acc-header-color: var(--sb-text, #101828);
    --sb-acc-body-bg: var(--sb-surface, #ffffff);
    --sb-acc-body-color: var(--sb-text-muted, #475467);
    --sb-acc-border-color: rgba(16, 24, 40, 0.14);
}

/* DARK (intentionally high contrast in both themes) */
.sb-acc-color-dark,
.pb-acc-color-dark {
    --sb-acc-header-bg: #101828;
    --sb-acc-header-color: #f8fafc;
    --sb-acc-body-bg: #1d2939;
    --sb-acc-body-color: rgba(248, 250, 252, 0.82);
    --sb-acc-border-color: rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------
   Dark-mode variants for the color modes
   (this is the missing piece in your current file)
   --------------------------------------------------------- */

html[data-theme="dark"] .sb-acc-color-default,
html[data-theme="dark"] .pb-acc-color-default {
    --sb-acc-header-bg: var(--sb-surface-2, #172445);
    --sb-acc-header-color: var(--sb-text, #eaf0ff);
    --sb-acc-body-bg: var(--sb-surface, #111a2e);
    --sb-acc-body-color: var(--sb-text-muted, rgba(234,240,255,0.72));
    --sb-acc-border-color: var(--sb-border, rgba(234,240,255,0.14));
}

html[data-theme="dark"] .sb-acc-color-soft,
html[data-theme="dark"] .pb-acc-color-soft {
    --sb-acc-header-bg: rgba(122, 162, 255, 0.18);
    --sb-acc-header-color: var(--sb-text, #eaf0ff);
    --sb-acc-body-bg: var(--sb-surface, #111a2e);
    --sb-acc-body-color: var(--sb-text-muted, rgba(234,240,255,0.72));
    --sb-acc-border-color: rgba(122, 162, 255, 0.26);
}

html[data-theme="dark"] .sb-acc-color-muted,
html[data-theme="dark"] .pb-acc-color-muted {
    --sb-acc-header-bg: rgba(234, 240, 255, 0.06);
    --sb-acc-header-color: var(--sb-text, #eaf0ff);
    --sb-acc-body-bg: var(--sb-surface, #111a2e);
    --sb-acc-body-color: var(--sb-text-muted, rgba(234,240,255,0.72));
    --sb-acc-border-color: rgba(234, 240, 255, 0.14);
}

html[data-theme="dark"] .sb-acc-color-dark,
html[data-theme="dark"] .pb-acc-color-dark {
    /* keep it “dark card on darker page” but readable */
    --sb-acc-header-bg: #0a1020;
    --sb-acc-header-color: #eaf0ff;
    --sb-acc-body-bg: #0f172a;
    --sb-acc-body-color: rgba(234, 240, 255, 0.78);
    --sb-acc-border-color: rgba(234, 240, 255, 0.12);
}

/* ---------------------------------------------------------
   Radius modes (override item rounding)
   --------------------------------------------------------- */

.sb-acc-radius-square .accordion-item,
.pb-acc-radius-square .accordion-item {
    border-radius: 0;
}

.sb-acc-radius-default .accordion-item,
.pb-acc-radius-default .accordion-item {
    border-radius: .75rem;
}

.sb-acc-radius-rounded .accordion-item,
.pb-acc-radius-rounded .accordion-item {
    border-radius: 1.25rem;
}