/* Multi-step form styles */

/* Form steps */
.form--multistep .form__step {
    display: none !important;
}

.form--multistep .form__step--active {
    display: block !important;
}

/* Step navigation */
.form__step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.form__step-navigation .btn {
    flex: 0 0 auto;
}

.form__step-prev {
    margin-right: auto;
}

.form__step-next {
    margin-left: auto;
}

/* Style the next button to match submit button */
.form__step-next {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.form__step-next:hover {
    background-color: #333;
}

/* Align buttons properly for last step */
/* When there's a previous button on last step, create flex container */
.form__step:last-child .form__step-navigation + .form__checkboxes {
    margin-bottom: 2rem;
}

.form__step:last-child .form__step-navigation {
    margin-bottom: 2rem;
}

/* Hide checkboxes and submit button initially for multi-step forms */
.form--multistep .form__checkboxes--last-step,
.form--multistep .form__submit--last-step,
.form--multistep .form__final-step-buttons--last-step {
    display: none !important;
}

.form--multistep .form__checkboxes--last-step.is-visible {
    display: block !important;
}

.form--multistep .form__submit--last-step.is-visible {
    display: inline-flex !important;
}

.form--multistep .form__final-step-buttons--last-step.is-visible {
    display: flex !important;
}

/* Final step buttons container */
.form__final-step-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
}

.form__final-step-buttons .form__step-prev {
    flex: 0 0 auto;
}

.form__final-step-buttons .form__submit {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Ensure buttons don't break to new lines */
.form__final-step-buttons > * {
    flex-shrink: 0;
}

/* Override any potential float or positioning issues */
.form__final-step-buttons .btn {
    float: none !important;
    position: relative !important;
    clear: none !important;
}

/* Error styling for form fields */
.form__field--error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.form__field--error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Step error messages */
.form__step-error {
    margin-bottom: 1rem;
    animation: slideInDown 0.3s ease;
}

@keyframes slideInDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .form__step-navigation {
        flex-direction: column;
        gap: 1rem;
    }

    .form__step-navigation .btn,
    .form__step-next,
    .form__step-prev {
        width: 100%;
        margin: 0;
    }

    .form__final-step-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .form__final-step-buttons .btn {
        width: 100%;
    }
}

/* Animation for step transitions */
.form__step {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.form__step--active {
    opacity: 1;
    transform: none;
}

/* Multi-step form container */
.form--multistep {
    position: relative;
}

/* Progress bar alternative (optional) */
.form__progress {
    width: 100%;
    height: 4px;
    background-color: #e5e7eb;
    border-radius: 2px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.form__progress-bar {
    height: 100%;
    background-color: #000;
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* Some global styles may set the submit button to 100% width.
   For the last step we want the button to size to its content
   and stay inside the flex container without pushing outside
   the form's rounded wrapper. */
.form--multistep .form__final-step-buttons .form__submit,
.form--multistep .form__step-navigation .form__submit,
.form--multistep .form__final-step-buttons .btn.form__submit {
    width: auto !important;
    /* Override any global 100% width */
    max-width: 100%;
    /* Never exceed container */
    flex: 0 0 auto;
    /* Keep natural size in flex */
    white-space: nowrap;
    /* Prevent awkward multi-line wrap */
}

/* Ensure the flex container itself cannot create horizontal overflow */
.form--multistep .form__final-step-buttons,
.form--multistep .form__step-navigation {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    /* Hide any accidental 1-2px overflow */
}

/* If text is extremely long, allow it to shrink rather than overflow */
.form--multistep .form__final-step-buttons .form__submit span,
.form--multistep .form__step-navigation .form__submit span {
    display: inline-block;
    min-width: 0;
}

/* Keep buttons on one line on desktop; they already stack via media query below 768px */
.form--multistep .form__final-step-buttons {
    flex-wrap: nowrap;
}