.custom-order-tracker {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}

.custom-order-tracker .step {
    width: 100%;
    position: relative;
    text-align: center;
    padding: 10px 0;
    transition: all 0.3s ease-in-out;
}

.custom-order-tracker .step::before {
    content: '';
    height: 2px;
    background: #ccc;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: -1;
}

.custom-order-tracker .step:first-child::before {
    left: 50%;
    width: 50%;
}

.custom-order-tracker .step:last-child::before {
    width: 50%;
}

.custom-order-tracker .step.completed::before,
.custom-order-tracker .step.current::before {
    background: #4caf50;
}

.custom-order-tracker .step::after {
    content: '';
    display: block;
    width: 12px; /* Tamanho do círculo do pin */
    height: 12px; /* Tamanho do círculo do pin */
    background: #ccc; /* Cor padrão do pin */
    border-radius: 50%; /* Círculo */
    margin: 0 auto 10px; /* Centralizar e espaçar */
    position: relative; /* Para aplicar o posicionamento absoluto dos pins */
    z-index: 1; /* Para garantir que o pin esteja acima da linha de progresso */
    transition: background 0.3s ease-in-out;
}

.custom-order-tracker .step.completed::after {
    background: #4caf50; /* Cor do pin quando completado */
}

.custom-order-tracker .step.current::after {
    background: #4caf50; /* Cor do pin quando atual */
}

.custom-order-tracker .step.confirmed::before,
.custom-order-tracker .step.confirmed::after {
    background: #4caf50; /* Verde para estados confirmados */
}

.custom-order-tracker .step.waiting::before,
.custom-order-tracker .step.waiting::after {
    background: #ff9800; /* Laranja para estados aguardando */
}

.custom-order-tracker .step.error::before,
.custom-order-tracker .step.error::after {
    background: #f44336; /* Vermelho para estados de erro */
}

.custom-order-tracker .step.current {
    font-weight: bold;
}

.custom-order-tracker .step.current,
.custom-order-tracker .step.completed {
    color: #4caf50;
}

.custom-order-tracker .step.waiting {
    color: #ff9800;
}

.custom-order-tracker .step.error {
    color: #f44336;
}

.custom-order-tracker .step span {
    display: block;
    margin-top: 5px;
    font-size: 14px;
}

.order-tracker-separator {
    height: 40px; /* Espaço de separação */
}