.angie-step-widget-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    position: relative; /* Container needs relative for the full-width line */
}

/* Continuous background line - anchored to true icon centers, not a fixed offset */
.angie-step-widget-container::before {
    content: '';
    position: absolute;
    top: calc(var(--icon-box-size, 50px) / 2); /* Half the icon box height, whatever size it is */
    left: calc(50% / var(--steps-count, 1)); /* Center of the first column */
    right: calc(50% / var(--steps-count, 1)); /* Center of the last column */
    height: 2px; /* Controlled via Elementor settings */
    background-color: #e5e5e5; /* Controlled via Elementor settings */
    z-index: 1;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex: 1;
    z-index: 2; /* Keep items above the line */
}

.step-item:last-child {
	margin-right: 0;
}

.step-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #f1f1f1;
    border-radius: 50%;
    color: #333;
    flex-shrink: 0;
    margin-bottom: 20px;
    position: relative;
    z-index: 2; /* Icon needs to sit on top of the line */
}

.step-icon-wrapper i {
    font-size: 20px;
}

.step-icon-wrapper svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.step-badge-text {
    line-height: 1; /* Keeps single-line numbers/labels vertically centered in the circle */
}

/* Remove the individual connecting lines */
.step-item:not(:last-child)::after {
    display: none;
}

.step-content-wrapper {
    padding-top: 5px; 
}

.step-title {
    margin: 0 0 5px;
    font-size: 1.2rem;
    font-weight: 600;
}

.step-description {
    margin: 0;
    color: #666;
}

/* Responsive fallback */
@media (max-width: 767px) {
	.angie-step-widget-container {
		flex-direction: column;
	}
    
    /* Remove horizontal continuous line on mobile */
    .angie-step-widget-container::before {
        display: none;
    }
    
	.step-item {
		flex-direction: row;
		align-items: flex-start; /* Pin icon to the top - don't center it against multi-line text */
		text-align: left;
		margin-right: 0;
		margin-bottom: var(--step-gap, 30px);
		width: 100%;
	}
	.step-icon-wrapper {
		margin-bottom: 0;
		margin-right: 20px;
	}
    
    /* Re-add vertical connecting lines for mobile - anchored to the icon's actual size */
	.step-item:not(:last-child)::after {
        display: block;
        content: '';
        position: absolute;
		top: var(--icon-box-size, 50px); /* Bottom edge of the icon circle */
		bottom: calc(-1 * var(--step-gap, 30px)); /* Reach exactly to the next icon, whatever the spacing is */
		left: calc(var(--icon-box-size, 50px) / 2); /* Horizontal center of the icon circle */
		width: 2px; /* Controlled via Elementor settings */
        background-color: #e5e5e5; /* Controlled via Elementor settings */
        z-index: 1;
	}
}