@import '/styles/global.css?v=3.1.0';
@import '/styles/HeaderManager.css?v=3.1.0';
@import '/styles/FooterManager.css?v=3.1.0';
@import '/styles/SignupElement.css?v=3.1.0';

.application {
    max-width: 900px;
    margin: 0 auto;
    padding-inline: 0px;
    flex: 1;
    z-index: 2;
}

.online-application {
    max-width: 1200px;
    padding: 80px 20px 30px;
}
.online-application h3 {
    padding-bottom: 30px;
}
.form__job-application {
    max-width: 1160px;
    margin-top: 50px;
    margin-bottom: 70px;
}
.personal-information {
    padding-inline: 20px;
    margin-bottom: 40px;
}

.personal-information h3 {
    text-transform: uppercase;
    padding-bottom: 30px;
}
.flex-fields {
    display: flex;
    padding-block: 10px;
}
.flex-fields-doc label {
    text-align: right;
}
.form_fields--job-app {
    height: 35px;
    width: 65%;
    
    margin-left: 30px;
}
.form__job-application .labels {
    text-align: right;
    margin-right: 0;
    width: 150px;
}

.residence {
    margin-bottom: 40px;
    padding-inline: 20px;
}
select {
    width: 65%;
}
.hear-about {
    margin-bottom: 40px;
}
.documents-background {
    background-color: var(--color-grey-background);
    width: 100%;
}
.application-documents {
    padding: 70px 20px;
}
.u-required-star {
    color: red;
}


.application-documents h3 {
    text-transform: uppercase;
    padding-bottom: 30px;
}
.application-documents p {
    padding-bottom: 40px;
}

.flex-fields-docs {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-inline: 20px;
}

.flex-fields-doc {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.flex-fields .labels, .flex-fields-doc .labels-doc {
    width: 200px; /* Adjust this width as needed */
    margin-right: 10px;
}

.flex-fields .form_fields--job-app, .flex-fields-doc input {
    flex: 1;
    margin-left: 10px;
}


.data-checkbox {
    padding-top: 20px;
}
.data-checkbox input {
    margin-right: 10px;
}
.form-closing-section {
    max-width: 900px;
    padding: 70px 20px 100px;
    margin: 0 auto;
}


.color-background {
    background-color: var(--color-grey-background);
    width: 100%;
    height: 470px;
    margin-top: -950px;
    margin-bottom: 450px;
    z-index: 1;
}

.button {
    margin-top: 40px;
}

/*using style from contact form, chang to job-application names*/
/* contact form */
.form_fields--contact {
    width: 50%;
    height: 35px;
 }
/* end contact form */
/*-------------------*/
@media (max-width: 900px) {
    .color-background {
        display: none;
    }
}
@media (max-width: 768px) {
    .online-application {
        padding-block: 50px 30px;
    }
}
/* MEDIUM SIZE MOBILES */
@media (max-width: 576px) {
    .online-application {
        padding-block: 30px 30px;
    }
    .residence .flex-fields,
    .personal-information .flex-fields {
        display: block;
        padding-block: 10px;
    }
    .flex-fields-doc label {
        text-align: right;
    }
    .residence .form_fields--job-app,
    .personal-information .form_fields--job-app {
        height: 35px;
        width: 100%;
        margin-left: 0px;
    }
    .form__job-application .labels {
        text-align: right;
        margin-right: 0;
        width: 150px;
    }
    select {
        width: 100%;
    }

    .flex-fields .labels, .flex-fields-doc .labels-doc {
        width: 150px; 
        margin-right: 10px;
    }
    
    .form__job-application .labels {
        text-align: left;   /* left-align on mobile */
        width: 100%;        /* full width instead of fixed 150px */
        margin-right: 0;
    }
    .flex-fields .labels, 
    .flex-fields-doc .labels-doc {
        width: 100%;
        margin-right: 0;
    }
    .flex-fields-doc {
        flex-direction: column;  /* stack label above input */
        align-items: flex-start;
    }
    .flex-fields-doc input {
        width: 100%;
        margin-left: 0;
    }


    /* Document upload cards */
    .flex-field-docs {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .flex-fields-doc {
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--color-white, #fff);
        border: 1px solid var(--color-grey, #ddd);
        border-radius: 6px;
        padding: 14px 16px;
        margin-bottom: 0; /* gap handles spacing now */
    }

    .flex-fields-doc .labels-doc {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
        font-weight: 600;
        text-align: left;
    }

    .flex-fields-doc input[type="file"] {
        width: 100%;
        margin-left: 0;
    }
}