@import '/styles/global.css';
@import '/styles/HeaderManager.css';
@import '/styles/FooterManager.css';


.intro--bewerbung { 
    border-bottom: 5px solid transparent;
    border-image: var(--color-gradient);
    border-image-slice: 1;
    margin-top: 100px;
}
.intro--content {
    max-width: 900px;
    padding: 40px 20px;
    display: block;
}
.intro--content h1 {
    text-align: left;
    text-shadow: none;
}
.intro--bewerbung h5 {
    color: var(--color-text);
}
.intro--bewerbung h1 {
    padding-top: 15px; 
    color: var(--color-accent1);
    padding-bottom: 10px;
}
/*  --------------  */

.application {
    max-width: 900px;
    padding-inline: 20px;
}

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

.personal-information h3 {
    text-transform: uppercase;
    padding-bottom: 30px;
}
.flex-field-docs {
    max-width: 70%;
    margin-right: 20%
}
.flex-fields {
    display: flex;
    padding-block: 15px;
    align-items: center;
}

.input-error-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    position: relative;
}

.file-input-error-container {
    flex-grow: 1;
    width: 100%;
    display: flex;              /* Make sure the container is a flex container */
    align-items: center;        /* Vertically center the items */



    justify-content: space-evenly; /* Horizontally align the items evenly */
    gap: 5px;                  /* Add padding (spacing) between the items */
}


.document-upload {
    max-width: 100%;          /* Prevent overflow */
    width: 100%;              /* Fill parent if possible */
    box-sizing: border-box;   /* Includes padding in width */
    padding: 1rem;            /* Optional: add spacing */
    display: flex;
    flex-direction: column;
}


.error-text {
    position: absolute;
    top: -20px;
}

.input-error-container .input {
    flex-grow: 1;
}

.flex-fields-doc label {
    text-align: right;
}
.form_fields--job-app {
    box-sizing: border-box;
    min-height: 35px;
    width: 100%;
    border: 1px solid #ccc; /* Default border */
    border-radius: 4px; /* Rounded corners */
    padding: 0.5rem; /* Optional: padding for input spacing */
    font-size: 1rem; /* Optional: font size */
    color: #333; /* Optional: text color */
}

/* Error state with red border */
.form_fields--job-app.error {
    border: 2px solid red; /* Red border when there's an error */
}

/* On focus, change border color */
.form_fields--job-app:focus {
    border: 1px solid #007bff; /* Blue border when focused */
}

.form__job-application .labels {
    text-align: right;
    margin-right: 10px;
    min-width: 200px;
    width: 200px;
}


.residence {
    margin-bottom: 40px;
}
select {
    width: 65%;
}
.hear-about {
    margin-bottom: 40px;
}
.application-documents {
    padding-top: 70px;
    margin-bottom: 40px; 

}
.u-required-star {
    color: red;
}


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

.flex-fields-doc {
    display: flex;
    flex-direction: row;
    padding-block: 15px;
    align-items: center;
    gap: 2rem;
    padding-inline: 20px;
}


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

.labels-doc {
    min-width: 180px; /* Or whatever works with your layout */
    white-space: wrap;
    flex-shrink: 0; /* Prevent shrinking */
}


.flex-fields .form_fields--job-app, .flex-fields-doc input {
    flex: 1;
    /*margin-left: 10px;*/
}
/* Hide the default file input */
.file_upload--application_form {
    display: none;
}

/* Custom file upload button */
.custom-file-upload {
    max-width: 100%;
    min-width: 150px;
    display: flex;
    padding: 8px 16px;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */
    background-color: var(--color-accent1); /* Adjust the button color */
    color: white;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
}

.custom-file-upload .span {

    width: 100%;
    text-align: center;
}




/* File name display */
.file-name {
    margin-left: 15px;
    min-width: 200px;
    width: 200px;
    color: var(--color-text); /* Adjust color */
    font-family: inherit;
    text-overflow: ellipsis;    /* add "..." */
}


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

.color-background {
    background-color: var(--color-grey-background);
    width: 100%;
    height: 450px;
    margin-top: -800px;
    margin-bottom: 400px
}

.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 */
/*-------------------*/

.form_fields--job-app.error {
    border: 1px solid red;
}





@media (max-width: 1024px) {

}

/* MEDIUM SIZE MOBILES */
@media (max-width: 650px) {

    .file-input-error-container {
        flex-direction: column;  /* Change the flex direction to column */
        gap: 10px;               /* Add more space between items in column layout */
    }

    .input-error-container {
        display: flex;
        flex-direction: column;  /* Change the flex direction to column */
        justify-content: flex-start; /* Align items from top to bottom */
        gap: 10px;               /* Add more space between items in column layout */
    }

    .flex-fields-doc {
        display: flex;
        justify-items: center;
        padding-block: 15px;
        flex-direction: column; /* Stack items vertically */
        align-items: center;
        align-content: center;
        gap: 10px;
        text-align: center;
        width: 100%; /* Ensure the flex container itself takes up the full width */
    }

    .flex-fields {
        display: flex;
        padding-block: 15px;
        flex-direction: column; /* Stack items vertically */
        justify-content: flex-start; /* Align items at the start vertically */
        align-items: flex-start; /* Align items to the left horizontally */
        width: 100%; /* Ensure the flex container itself takes up the full width */
    }

    .labels {
        min-width: 250px;
        min-height: 30px;
        width: 100%;
        margin-bottom: 10px; /* Space between label and input */
        text-align: left;
    }

    .document-upload {

        width : 80dvw;
    }

    .file-input-error-container {
        display: flex;
        flex-direction: column;   /* stack vertically */
        align-items: center;      /* center horizontally */
        gap: 8px;                 /* spacing between button and text */
        width: 100%;              /* optional: make container full-width */
    }

    .file-name {
        width: 100%;
        margin-left: 0;
    }

    .file_upload--application_form {

        width: 100px;
    }


    .flex-fields .form_fields--job-app {
        width: 100%; /* Ensure inputs take up full width of the container */
    }


    /* Ensure error text is not overlapping */
    .error-text {
        display: block; /* Makes error text a block-level element */
        margin-top: 5px; /* Adds space between the input and error text */
        font-size: 0.875rem;
        width: 100%;
        color: red;
        position: static; /* Ensures error text doesn't overlap with other elements */
    }

    .intro--content {
        padding: 20px;
    }
    .online-application {
        margin-top: 40px;
    }
    .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;
    }
    
    .color-background {
        background-color: var(--color-grey-background);
        width: 100%;
        height: 450px;
        margin-top: -830px;
        margin-bottom: 400px
    }
    .flex-fields .labels, .flex-fields-doc .labels-doc {
        width: 150px; /* Adjust this width as needed */
        margin-right: 0px;
    }

    .color-background {
        margin-top: -850px;
    }
    .flex-fields {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 10px;
        margin-block: 20px;
    }
    .labels-doc {
        margin-left: 0;
        width: 100%;
        display: flex;
        justify-content: center; /* centers the group */
    }
    .label-group {
        display: flex;
        align-items: center;     /* vertically aligns text and star */
        gap: 0.25rem;            /* optional: adds small space between text and star */
    }
    .flex-fields-doc label {
        text-align: left;
    }
}

/* MOBILES */
@media (max-width: 500px) {
}

/* MOBILES */
@media (max-width: 450px) {
    .form-closing-section {
        padding: 40px 0px;
    }
    .flex-fields {
        display: flex;
        flex-direction: column;
        padding-block: 10px;
        justify-content: center;
        align-items: flex-start;
        row-gap: 10px;
        margin-block: 20px;
    }
}
/* MOBILES */
@media (max-width: 400px) {
    .color-background {
        margin-top: -880px;
    }
}

/* MOBILES */
@media (max-width: 420px) {
    .color-background {
        margin-top: -860px;
    }
    .flex-fields .labels, .flex-fields-doc .labels-doc {
        width: 100px; /* Adjust this width as needed */
        margin-right: 0px;
    }
}

/* MOBILES */
@media (max-width: 390px) {
    .color-background {
        margin-top: -900px;
    }
    .flex-fields .labels, .flex-fields-doc .labels-doc {
        width: 100px; /* Adjust this width as needed */
        margin-right: 0px;
    }
}

@media (max-width: 350px) {
    .color-background {
        margin-top: -950px;
    }
    .flex-fields .labels, .flex-fields-doc .labels-doc {
        width: 80px; /* Adjust this width as needed */
        margin-right: 0px;
        font-size: .9rem;
    }
}