/* Import Poppins font (already linked in HTML) */
body {
    background: #fbfcf7;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fbfcf7, #e9fdf3);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fbfcf7, #e9fdf3);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    font-family: 'Poppins', sans-serif;
    color: #292929;
    font-size: 0.9rem;
    /* Apply Poppins globally */
}

select {
    font-size: 0.9rem !important;
}

.header{
    text-align: center;
    margin-bottom: 20px;
    background-color: #086B18;
    margin: -50px -20px 0px -20px;
    padding: 30px 0px 10px 0px;
}

.form-wrapper {
    max-width: 800px;
    /* Adjust max-width as needed */
    margin: auto;
    overflow: hidden;
    /* CRITICAL: Hides parts of form-container outside */
    background-color: #ffffff;
    /* Ensure background is white */
    border-radius: 1.5rem !important;
    /* Match Bootstrap's rounded corners */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* Bootstrap's shadow */
    padding: 50px 20px 0px 20px;
}

/* Form container to hold steps side-by-side */
.form-container {
    display: flex;
    width: 300%;
    /* 100% * number of steps (3) */
    transition: transform 0.5s ease-in-out;
    /* Smooth transition for sliding */
    margin: 0;
    padding: 0;
    /* Ensure direct children (form-step) take full height if needed */
    align-items: flex-start;
    /* Align items to the top */
}

/* Individual form steps */
.form-step {
    width: calc(100% / 3);
    /* Each step takes 1/3 of the container width */
    padding: 20px;
    /* Add some padding within steps */
    flex-shrink: 0;
    /* Prevent steps from shrinking */
    box-sizing: border-box;
    /* Include padding in width calculation */
    /* Ensure steps fill the container height if needed, though align-items handles this */
    /* Steps are positioned relatively by default, which is fine */
}


/* --- Shake Animation for Invalid Fields --- */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Apply shake animation to invalid controls */
.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
    /* Added .form-check-input for checkbox/radio validation */
    animation: shake 0.5s;
    /* Keep the border color set by Bootstrap/previous rules */
    /* border-color: #dc3545 !important; is already there and important for visual cue */
}


/* --- Drag and Drop Area Styling --- */
.drag-drop-area {
    border: 2px dashed #ced4da;
    /* Dashed border */
    transition: border-color 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    /* Indicate it's clickable */
    background-color: #f8f9fa;
    /* Light background */
}

.drag-drop-area:hover {
    border-color: #086B18;
    /* Blue border on hover */
    background-color: #eef5ff;
    /* Lighter blue background on hover */
}

.drag-drop-area.drag-over {
    border-color: #0a58ca;
    /* Darker blue border when dragging over */
    border-style: solid;
    /* Solid border when dragging over */
    background-color: #dfeeff;
    /* Slightly darker blue background */
}

.drag-drop-area p {
    margin-bottom: 0.5rem;
    /* Adjust spacing */
}

.drag-drop-area i {
    color: #6c757d;
    /* Bootstrap secondary color for icon */
    transition: color 0.3s ease;
}

.drag-drop-area:hover i {
    color: #086B18;
    /* Blue icon on hover */
}

.drag-drop-area.drag-over i {
    color: #0a58ca;
    /* Darker blue icon */
}


/* File Preview Styling */
#filePreview {
    margin-top: 15px;
    /* Increased margin */
}

#filePreview .file-item {
    display: flex;
    align-items: center;
    background-color: #f1f1f1;
    padding: 8px 12px;
    /* Slightly more padding */
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 0.9em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

#filePreview .file-item i {
    margin-right: 10px;
    /* More space for icon */
    color: #6c757d;
    /* Bootstrap secondary color */
    font-size: 1.3em;
    /* Slightly larger icon */
}

#filePreview .file-item span {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
    /* Space before remove button */
    font-weight: 500;
    /* Medium weight for filename */
}

#filePreview .file-item .remove-file {
    cursor: pointer;
    color: #dc3545;
    /* Bootstrap danger color */
    font-weight: bold;
    background: none;
    border: none;
    padding: 0 5px;
    font-size: 1.1em;
    /* Slightly larger remove icon */
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#filePreview .file-item .remove-file:hover {
    opacity: 1;
}

/* --- Floating Label Adjustments --- */
/* Ensure these are specific enough to override Bootstrap defaults */
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select:not(:placeholder-shown)~label,
.form-floating>textarea:not(:placeholder-shown)~label {
    /* Added textarea */
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* --- Focus Styling --- */
.form-floating>.form-control:focus,
.form-floating>.form-select:focus,
.form-floating>textarea:focus {
    /* Added textarea */
    border-color: #086B18;
    /* Bootstrap primary blue */
    box-shadow: none;
    /* Remove default Bootstrap focus glow */
}

.form-floating>.form-control:focus~label,
.form-floating>.form-select:focus~label,
.form-floating>textarea:focus~label {
    /* Added textarea */
    color: #086B18;
    /* Bootstrap primary blue */
    opacity: .65;
}

/* --- Validation Styling --- */
/* Added is-valid classes to match Bootstrap's classes */
.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
    border-color: #dc3545 !important;
    /* Keep red border */
    /* Animation added above */
}

.form-control:focus.is-invalid,
.form-select:focus.is-invalid,
.form-check-input:focus.is-invalid {
    border-color: #dc3545;
    /* box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); */
    /* Keep red focus glow */
}

.form-floating>.form-control.is-invalid~label,
.form-floating>.form-select.is-invalid~label,
.form-floating>textarea.is-invalid~label {
    /* Added textarea */
    color: #dc3545;
    /* Keep red label color */
}

.form-control.is-valid,
.form-select.is-valid,
.form-check-input.is-valid {
    border-color: #198754 !important;
    /* Bootstrap success green */
}

.form-control:focus.is-valid,
.form-select:focus.is-valid,
.form-check-input:focus.is-valid {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
    /* Green focus glow */
}

.form-floating>.form-control.is-valid~label,
.form-floating>.form-select.is-valid~label,
.form-floating>textarea.is-valid~label {
    color: #198754;
    /* Green label color */
}


/* --- Button Styling --- */
#prevBtn,
#nextBtn,
#submitBtn {
    padding: 0.5rem 2.5rem;
    min-width: 150px;
    /* Slightly larger buttons */
    /* Medium weight */
    font-size: 0.9rem;
    background-color: #086B18;
    border: none;
}

#submitBtn:disabled {
    cursor: not-allowed;
    /* Indicate disabled state */
    opacity: 0.65;
    /* Standard disabled button opacity */
}

#nextBtn+#submitBtn {
    margin-left: 10px;
}

.form-floating>label {
    padding: 1.1rem .75rem;
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
    .form-wrapper {
        padding: 20px !important;
    }

    .form-step {
        padding: 15px;
    }

    h2 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    .drag-drop-area {
        padding: 20px;
        /* Adjust padding */
    }

    .header{
        margin: -20px -20px 0px -20px;
    }
}

@media (max-width: 576px) {
    .form-step {
        padding: 10px;
    }

    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch;
    }

    .d-flex.justify-content-between button {
        width: 100%;
    }

    .d-flex.justify-content-between div {
        /* Next/Submit container */
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
    }

    #prevBtn {
        margin-bottom: 10px;
    }

    #nextBtn,
    #submitBtn {
        width: auto;
        min-width: 100px;
    }

    #nextBtn+#submitBtn {
        margin-left: 5px;
    }

    .drag-drop-area {
        padding: 15px;
    }

    .drag-drop-area i {
        font-size: 2.5em;
        /* Adjust icon size */
    }

    .drag-drop-area p {
        font-size: 0.9em;
    }
}