.bce-accordion .accordion-button[aria-expanded="true"] {
    border: 2px solid #7c3aed !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
}
.bce-accordion .accordion-collapse.show {
    border: 2px solid #7c3aed !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 0.5rem !important;
}
.bce-accordion .accordion-button[aria-expanded="true"],
.rb-accordion .accordion-button[aria-expanded="true"],
.de-accordion .accordion-button[aria-expanded="true"] {
    border: 2px solid #7c3aed !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
}
.bce-accordion .accordion-collapse.show,
.rb-accordion .accordion-collapse.show,
.de-accordion .accordion-collapse.show {
    border: 2px solid #7c3aed !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 0.5rem !important;
}

/* Light purple outline for closed accordions (so the accordion has a subtle outline when collapsed) */
.bce-accordion .accordion-button[aria-expanded="false"],
.rb-accordion .accordion-button[aria-expanded="false"],
.de-accordion .accordion-button[aria-expanded="false"] {
    border: 1px solid rgba(124, 58, 237, 0.18) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* Ensure closed accordion items keep a small padding and rounded corners */
.bce-accordion .accordion-item,
.rb-accordion .accordion-item,
.de-accordion .accordion-item {
    border-radius: 8px;
}

/* When accordion is focused / hovered, emphasize the outline slightly */
.bce-accordion .accordion-button[aria-expanded="false"]:hover,
.rb-accordion .accordion-button[aria-expanded="false"]:hover,
.de-accordion .accordion-button[aria-expanded="false"]:hover,
.bce-accordion .accordion-button[aria-expanded="false"]:focus,
.rb-accordion .accordion-button[aria-expanded="false"]:focus,
.de-accordion .accordion-button[aria-expanded="false"]:focus {
    border-color: rgba(124, 58, 237, 0.28) !important;
}

/* Slider styling with BAU (red circle) and Transition (purple circle) markers */
.test-slider .rc-slider {
    --bau-position: 0%;
    --transition-position: 100%;
    --bau-display: block;
    position: relative;
}

.test-slider .rc-slider-rail {
    background-color: #d1d5db !important; /* Grey rail */
}

.test-slider .rc-slider-track {
    background-color: #6b7280 !important; /* Grey track */
}

.test-slider .rc-slider-handle {
    border-color: #6b7280 !important; /* Grey handle border */
    background-color: #6b7280 !important; /* Grey handle */
}

.test-slider .rc-slider-handle:hover,
.test-slider .rc-slider-handle:active,
.test-slider .rc-slider-handle:focus {
    border-color: #4b5563 !important;
    box-shadow: 0 0 0 5px rgba(107, 114, 128, 0.12) !important;
}

/* Add BAU marker (red circle) on the slider */
.test-slider .rc-slider::before {
    content: '';
    position: absolute;
    display: var(--bau-display);
    width: 12px;
    height: 12px;
    background-color: #dc2626;
    border: 2px solid white;
    border-radius: 50%;
    top: 50%;
    left: var(--bau-position);
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Add Transition marker (purple circle) on the slider */
.test-slider .rc-slider::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #7c3aed;
    border: 2px solid white;
    border-radius: 50%;
    top: 50%;
    left: var(--transition-position);
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}