.doc-timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    position: relative;
    z-index: 0;
}

.doc-step {
    position: relative;
    text-align: center;
    flex: 1;
}

.doc-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    font-weight: bold;
    border: 4px solid #e5e7eb;
    background: #fff;
    color: #fff;
    color: #6b7280;
    z-index: 1;
}

.doc-step-label {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    z-index: 0;
}

/* Garis antar step */
.doc-step::after {
    content: "";
    position: absolute;
    top: 18px; /* center line horizontally */
    left: 70%;
    /* right: 30%; */
    width: 60%;
    height: 4px;
    background-color: #e5e7eb;
    z-index: 0;
}

.doc-step:last-child::after {
    display: none; /* tidak ada garis setelah step terakhir */
}

/* Completed step styling */
.doc-step.completed .doc-step-circle {
    background: #16a34a; /* green */
    border-color: #16a34a;
    color: #fff;
    z-index: 2;
}
.doc-step.completed::after {
    background-color: #16a34a;
}

/* Current step styling */
.doc-step.current .doc-step-circle {
    background: #2563eb; /* blue */
    border-color: #2563eb;
    color: #fff;
    z-index: 2;
}
.doc-step.current .doc-step-label {
    color: #2563eb;
    font-weight: bold;
    z-index: 2;
}