/**
    * Multi-Step Form Styles
    * This CSS file styles a multi-step form with a stepper navigation system.

    @author Muhib
    @version 1.0.0
*/


.form-container { background: white; border-radius: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 2rem; width: 100%; }

/* Stepper Styles */
.stepper { display: flex; justify-content: space-between; margin-bottom: 3rem; position: relative; padding: 0 20px; }

/* Remove the main background line */
.stepper::before { display: none; }

.stepper .step { position: relative; z-index: 2; background: white; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; }

/* Add small lines on both sides of step number */
.stepper .step::before,
.stepper .step::after { content: ""; position: absolute; top: 20px; width: 40%; /* Shorter line segments */ height: 3px; background: #e2e8f0; z-index: 1; }

.stepper .step::before { left: 0; }
.stepper .step::after { right: 0; }

/* Remove lines for first and last steps */
.stepper .step:first-child::before,
.stepper .step:last-child::after { display: none; }

/* Style the lines based on step status */
.stepper .step.completed::before,
.stepper .step.completed::after,
.stepper .step.completed ~ .step::before { background: #10b981; }

.stepper .step.active::before,
.stepper .step.active::after,
.stepper .step.active ~ .step::before { background: #dce1eb; }

/* Update step number styles */
.stepper .step-number { width: 40px; height: 40px; border-radius: 50%; background: #e2e8f0; color: #64748b; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-weight: 600; transition: all 0.3s ease; position: relative; z-index: 2; }
.stepper .step.completed .step-number { background: #10b981; color: white; }
.stepper .step.active .step-number { background: #635DFF; color: white; }
.stepper .step-title { font-size: 0.875rem; color: #64748b; font-weight: 500; }
.stepper .step.active .step-title { color: #635DFF; }




/* Form Styles */
/*.form-step { display: none; animation: fadeIn 0.5s ease; }*/
/*.form-step.active { display: block; }*/

.form-step .section-title { font-size: 1.5rem;font-weight:600; color: #3D3D3D; }
.form-step .section-sub-title { font-size: 1.18rem; font-weight: 600; margin-bottom: 1.6rem; color: #3D3D3D; }
.form-step .section-help-text { font-size: 1rem; color: #6B7280; margin-bottom: 1.5rem; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/*validation state*/
input.invalid { border-color: #dc3545; background: #fff8f8; }
select.invalid { border-color: #dc3545; background: #fff8f8; }
textarea.invalid { border-color: #dc3545; background: #fff8f8; }


.error-message { color: #dc3545; font-size: 0.875rem; margin-top: 5px; min-height: 20px; display: flex; align-items: center; opacity: 0; transform: translateY(-5px); transition: all 0.3s ease; }
.error-message.show { opacity: 1; transform: translateY(0); }

.success-message { color: #28a745; font-size: 0.875rem; margin-top: 5px; min-height: 20px; display: flex; align-items: center; opacity: 0; transform: translateY(-5px); transition: all 0.3s ease; }
.success-message.show { opacity: 1; transform: translateY(0); }

/* Navigation Buttons */
.form-navigation { display: flex; gap:1.5rem; justify-content: end; margin-top: 2rem; padding-top: 1.5rem; }



/* Responsive Design */
@media (max-width: 640px) {
    .form-container { padding: 1.5rem; }
    .stepper { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 0; }

    .step { display: flex; flex-direction: row; align-items: center; gap: 1rem; width: 100%; }
    .step::before, .step::after { display: none; /* Hide connecting lines in mobile view */ }
   
    .step-number { margin: 0; }
    .step-title { margin: 0; }
}