/* S3798888 - ICTWEB441 - Web Development 1 Cluster - Semester 1, 2026
Notes: yes everything is rounded. I wanted the form to be clean but also not sharp/hostile. Also as per the requirements meeting, it was identified to me that Feedback was to appear either top of form or on top of where error occurred. As such, feedback will be appearing on top of the form in a list.*/

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-form{
    width: 500px;
    background-color: slategray;
    border: 10px solid rgba(250, 235, 215, 0.819);
    border-radius: 60px;
    padding: 30px;
    color: rgba(247, 187, 36, 0.925);
}

h1{
    text-align: center;
    font-size: 40px;
    border: 3px solid rgba(250, 235, 215, 0.819);
    border-radius: 60px;
    padding: 4px;
}

.form_sect{
    margin: 30px 0 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.student_digit{
    width: 28px;
    text-align: center;
}

label{
    font-size: 25px;
    min-width: 120px;
}

input{
    flex: 1;
    padding: 5px;
    border-radius: 20px;
    font-size: 20px;
    background-color: antiquewhite;
    border: 3px solid rgba(250, 235, 215, 0.819);
}

.submit{
    padding: 8px;
    width: 100%;
    font-size: 40px;
    background-color: wheat;
    border-radius: 60px;
}


/* Address autofinder dropdown css */

#address-suggestions {
    position: absolute;
    top: 100%;  /* puts it below input so you can see what you're typing */
    left: 125px;
    right: 0;
    background: antiquewhite;
    border: 2px solid rgba(250, 235, 215, 0.819);
    border-top: none;
    max-height: 150px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
    z-index: 1000;
    border-radius: 20px;
}

.suggestion {
    padding: 8px;
    cursor: pointer;
    border-bottom: 2px solid rgba(250, 235, 215, 0.819);
    color: black;
    border-radius: 20px;
}

.suggestion:hover {
    background-color: rgb(223, 190, 109);
}

/* Errors List
Note that the errors are scrollable. This is because I decided I would prefer to have the form stay in a constant spot, because having the form move whilst trying to fix an issue would be a bigger annoyance than the need to scroll a bit. And as errors are resolved the list of errors will push the others errors to the top anyway.
*/

.errors{
    width: 500px;
    height: auto;
    max-height: 150px;       
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: slategray;
    border-radius: 60px;
    color: rgba(247, 187, 36, 0.925);
    cursor: all-scroll;
}

.errors h2{
    text-align: center;
    padding: 2px;
}

.errors ul li{
    list-style: none;
    text-align: center;
    padding: 2px;
}

/* mobile devices */
@media (max-width: 600px) {
    body {
        padding: 10px;
        display: block;
        align-items: initial;
        justify-content: initial;
    }
    
    .register-form, .errors {
        width: 95%;
        border-width: 5px;
        border-radius: 30px;
        padding: 20px;
    }
    
    h1 {
        font-size: 28px;
        border-width: 2px;
        padding: 3px;
    }
    
    .form_sect {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin: 20px 0 0 0;
    }
    
    label {
        font-size: 20px;
        min-width: auto;
        margin-bottom: 5px;
    }
    
    input {
        font-size: 18px;
        padding: 8px;
    }
    
    .submit {
        font-size: 28px;
        padding: 12px;
        margin-top: 20px;
    }
    
    .student_digit {
        width: auto;
        text-align: left;
        margin-bottom: 5px;
    }
    
    #address-suggestions {
        left: 0;
        right: 0;
        max-height: 120px;
    }
    
    .errors {
        max-height: 120px;
        margin-bottom: 15px;
    }
    
    .errors h2 {
        font-size: 20px;
    }
    
    .errors ul li {
        font-size: 16px;
        padding: 3px;
    }
}

@media (max-width: 400px) {
    .register-form, .errors {
        width: 98%;
        border-radius: 20px;
        padding: 15px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    label {
        font-size: 18px;
    }
    
    input {
        font-size: 16px;
        padding: 6px;
    }
    
    .submit {
        font-size: 24px;
        padding: 10px;
    }
}