/**
 * Steps Widget Styles
 */

.steps-widget {
    width: 100%;
}

.steps-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.step-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    height: 60px; /* 与图片高度保持一致，使箭头相对于图片垂直居中 */
}

.step-arrow svg {
    display: block;
}

/* 响应式布局 - 手机端水平显示 */
@media (max-width: 768px) {
    .steps-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 10px 0;
    }
    
    .step-item {
        flex-shrink: 0;
        min-width: 80px;
    }
    
    .step-arrow {
        flex-shrink: 0;
    }
}

/* 可选：垂直布局模式 */
.steps-widget.mobile-vertical .steps-container {
    flex-direction: column;
    align-items: center;
}

.steps-widget.mobile-vertical .step-arrow {
    transform: rotate(90deg);
    margin: 15px 0;
}