/* 订单处理流程管理 - 前台样式 */
/* 使用 Bootstrap 5 组件，只保留必要的自定义样式 */

/* 步骤指示器 - 使用 Bootstrap card */
.wc-order-process-step-indicator {
    margin: 1.5rem 0;
}

/* 步骤圆圈样式 */
.step-circle {
    width: 50px;
    height: 50px;
    font-size: 1.125rem;
    font-weight: 600;
}

/* 步骤连接线样式 */
.step-connector {
    width: calc(100% - 50px);
    height: 2px;
    margin-left: 25px;
    transform: translateY(-50%);
    z-index: -1;
}

.step-connector-completed {
    background-color: var(--bs-success, #198754);
}

.step-connector-upcoming {
    background-color: var(--bs-border-color, #dee2e6);
}

/* 处理步骤标签 - 使用 Bootstrap badge */
.process-step-badge {
    font-size: 0.875rem;
}

.process-step-info {
    font-size: 0.75rem;
}

/* 物流追踪链接样式 */
.tracking-number-link {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 600;
}

.tracking-number-link:hover {
    text-decoration: underline;
    color: var(--bs-primary);
}

/* 物流追踪组件样式 */
.wc-order-process-tracking-widget {
    display: inline-block;
    margin: 0.5rem 0;
}

/* 响应式：移动端步骤指示器 */
@media (max-width: 767.98px) {
    .wc-order-process-step-indicator .step-item {
        margin-bottom: 1rem;
    }
    
    .step-connector {
        display: none !important;
    }
}