/* Custom styles for the multi-step form */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* slate-50 */
}

.form-step {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out;
    will-change: transform, opacity;
}

    .form-step.active {
        transform: translateX(0);
        opacity: 1;
        z-index: 10;
        position: relative;
    }

    .form-step.inactive-left {
        transform: translateX(-100%);
        opacity: 0;
        position: absolute;
    }

    .form-step.inactive-right {
        transform: translateX(100%);
        opacity: 0;
        position: absolute;
    }
/* Style for the vertical progress bar */
.progress-step-container {
    position: relative;
}

.progress-line {
    position: absolute;
    top: 2.5rem; /* Start below the icon */
    left: 1.25rem; /* Center of the icon */
    width: 2px;
    height: calc(100% - 2.5rem);
    background-color: #e2e8f0; /* slate-200 */
    transition: background-color 0.4s ease;
}

.progress-step-container.completed .progress-line {
    background-color: #ea580c; /* orange-600 */
}

.progress-step {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

    .progress-step.active {
        background-color: #f97316; /* orange-500 */
        border-color: #f97316;
        color: white;
    }

    .progress-step.completed {
        background-color: #ea580c; /* orange-600 */
        border-color: #ea580c;
        color: white;
    }
/* Custom focus rings using the orange theme */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.4); /* orange-400 with opacity */
    border-color: #f97316; /* orange-500 */
}