/* Track line (grey) — top/bottom inset so the line sits between first/last dots */
.timeline-container {
    overflow: visible;
}

.timeline-container .timeline {
    width: 2px;
    background-color: #d1d5db; /* gray-300 */
    overflow: hidden;
    top: 50px;
    bottom: 50px;
}

/* Progress fill (primary) grows with scroll */
.timeline-container .timeline_progress-bar {
    background-color: var(--color-primary, #5C33AD);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: none;
}

/* Keep title, dot, and content on one shared top line */
.timeline-container .step-row {
    align-items: flex-start;
}

.timeline-container .step-col--title,
.timeline-container .step-col--dot,
.timeline-container .step-col--content {
    padding-top: 3rem; /* shared top offset for all three columns */
    box-sizing: border-box;
}

.timeline-container .step-col--dot {
    align-items: flex-start;
    justify-content: center;
}

.timeline-container .step-col--dot .timeline_circle {
    /* Fit solid dot + outer dashed ring (24px) */
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    position: relative;
    margin-top: 0;
}

.timeline-container .step-col--title .step-title,
.timeline-container .step-col--title .step-label {
    margin-top: 0;
    margin-bottom: 0;
}

.timeline-container .step-col--title .step-title {
    position: relative;
    /* Match the 24px dot box so the first line sits on the same axis */
    min-height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timeline-container .step-col--title .step-label {
    margin-bottom: 0.5rem;
}

.timeline-container .step-col--content > :first-child,
.timeline-container .step-col--content > :first-child > :first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* First content block shares the same 24px head line as the dot */
.timeline-container .step-col--content > :first-child {
    min-height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Shared gradient def lives in an offscreen SVG */
.timeline-container .timeline-gradients {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Outer dashed ring: grey idle, gradient #8F699B → #F6A91F when active */
.timeline-container .circle-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    box-sizing: border-box;
    background-color: #fff;
}

.timeline-container .circle-ring__svg {
    position: absolute;
    inset: 0;
    width: 24px;
    height: 24px;
    pointer-events: none;
    overflow: visible;
}

.timeline-container .circle-ring__track {
    fill: none;
    stroke-width: 1;
    stroke-dasharray: 2.5 2;
    transition: none;
}

.timeline-container .circle-ring__track--idle {
    stroke: #D9D9D9;
    opacity: 1;
}

.timeline-container .circle-ring__track--active {
    stroke: url(#timeline-ring-gradient);
    opacity: 0;
}

.timeline-container .circle-ring.active .circle-ring__track--idle {
    opacity: 0;
}

.timeline-container .circle-ring.active .circle-ring__track--active {
    opacity: 1;
}

/* Inner solid dot: grey by default, primary when active */
.timeline-container .circle {
    width: 16px;
    height: 16px;
    background-color: #D9D9D9;
    transition: none;
}

.timeline-container .circle.active {
    background-color: var(--color-primary, #5C33AD);
}

/* Hide timeline line on mobile */
@media (max-width: 767px) {
    .timeline {
        display: none;
    }
}