/* Scoped only to this widget */
.pt-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: var(--pt-gap, 20px);
}

/* Line starts at center of first circle and ends at center of last circle (NO extra line before/after) */
.pt-timeline::before {
    content: "";
    position: absolute;
    top: calc(var(--pt-circle) / 2);
    left: calc(var(--pt-circle) / 2);
    right: calc(var(--pt-circle) / 2);
    height: var(--pt-line, 2px);
    background: var(--pt-color);
}

.pt-step {
    flex: 1;
    position: relative;
}

.pt-circle {
    width: var(--pt-circle, 60px);
    height: var(--pt-circle, 60px);
    line-height: var(--pt-circle, 60px);
    border-radius: 50%;
    border: var(--pt-border, 2px) solid var(--pt-color);
    background: var(--pt-circle-bg, #fff);
    color: var(--pt-circle-text, var(--pt-color));
    font-weight: 700;
    margin: 0 auto 12px;
    position: relative;
    z-index: 2;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Hover: ALL steps same behavior */
.pt-step:hover .pt-circle {
    background: var(--pt-hover);
    color: #fff;
    border-color: var(--pt-hover);
}

.pt-step h4 {
    margin: 8px 0 0;
}

.pt-step p {
    margin: 6px 0 0;
    opacity: .9;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .pt-timeline {
        flex-direction: column;
        gap: 20px;
    }
    .pt-timeline::before {
        display: none;
    }
    .pt-circle {
        margin-left: 0;
        margin-right: 0;
    }
}