/* LABELS */
label {
    font-size: 1.4rem;
    color: var(--navbar-color);
}

.btn {
    display: flex;
    font-size: 1.4rem;
    cursor: pointer;
    max-width: fit-content;
    justify-content: center;
    /* background-color: #3b3b3b3b; */
    background-color: var(--background-color);
    transition: all 0.3s ease;
}

.form-contact .btn {
    margin-left: 0;
    width: 100%;
    max-width: unset;
    padding: 10px;
}

.btn:hover {
    color: var(--background-color);
    /* transition: opacity 1.3s all; */
    /* background-color: var(--input-background-color); */
    transition: all 0.3s ease;

}

/* BUTTONS */
.button {
    /* display: flex; */
    width: 100%;
    position: relative;
    background-color: rgb(199, 189, 177);
    border: 2px solid white;
    font-size: 2.8rem;
    color: #FFFFFF;
    padding: 10px 10px;
    width: 120px;
    margin: 10px auto;
    text-align: center;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

#start {
    width: auto;
}

.button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s;
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
}

button:hover {
    background-color: #3b3b3b;
    cursor: pointer;
}

/* INPUTS */
input[type=text], input[type=email] {
    /* width: 180px; */
    max-width: 100%;
    color: #eeeeee;
    padding: 12px 20px;
    display: inline-block;
    border-radius: 10px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

input[type=text], input[type=number], input[type=password], input[type=email], textarea, select, button {
    margin: 10px;
    padding: 10px;
    max-width: 100%;
    border-radius: 10px;
    color: #eeeeee;
    transition: all 0.3s ease;
    @media screen and (max-width: 576px) {
        margin: 10px auto;
    }
}
/* @media screen and (min-width: 576px) {
    #recovery-input {
        gap: 0;
    }
} */



textarea {
    display: flex;
    align-items: center;
    /* max-width: 450px; */
    max-width: 100%;
    min-height: 50px;
    /* min-width: 100%; */
    resize: both;
    border: 1px solid #ccc;
    margin-left: 0;
    /* width: 50%; */
}

select {
    border: 2px solid #ccc;
    color: #ffffff;
    background-color: #000;
    width: 20rem;
    margin-bottom: 0 auto;
    padding: 10px;
    cursor: pointer;
}

select:hover {
    color: #3b3b3b;
}

input[type=password], select, input[type=number] {
    padding: 12px 20px;
    display: inline-block;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    max-width: 100%;
    /* margin-left: 0;
    width: 100%; */
}

input:focus,
textarea:focus, input:hover, textarea:hover {
    border: 1px solid var(--input-focus);
    background-color: var(--input-background-color);
    /* transition: all 0.2s ease; */
    /* transition: border 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 0.3s step-end; */
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

input[type=password].input_error,
input[type=text].input_error,
input[type=email].input_error,
input[type=number].input_error,
textarea .input_error {
    border-bottom: 1px solid red;
    border-inline: red;
    /* transition: all 0.2s ease; */
}

input.input_error::placeholder {
    color: rgb(247, 116, 116);
}

input.input_error:focus, input.input_error:hover {
    border-bottom: 1px solid var(--input-focus);
    border-inline: unset;
}

input.input_error:not(:placeholder-shown) {
    border-bottom: 1px solid var(--input-focus);
}

input {
    text-align: center;
    /* border: 1px solid #ccc; */
    border: 1px solid var(--border-color);
    width: 180px;
    /* font-size: small; */
    border-inline: #ccc;
    background-color: #ffffff1a;
    @media screen and (max-width: 876px) {
        width: unset;
    }
}

input:active {
    /* font-size: small; */
}



/* INPUT ERRORS */
.alert-error {
    text-align: center;
    color: #fd6b00;
    /* opacity: 1; */
    /* border: red 1px solid; */
    max-width: 100%;
    margin: 15px auto;
    /* transition: all ease-in-out; */
    /* transition: opacity 3s 1s; */
    animation: fadeIn 1s;
    /* transition: all 3s; */
}
/* END OF INPUTS*/

/* FORM PROPERTIES */
form {
    max-width: 100%;
    @media (max-width: 976px) {
        min-width: 50px;
    }
}

.form-hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s;
}

.form-show, .form-hidden:has(.input_error) {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.form-logo {
    filter: drop-shadow(16px 16px 20px rgb(255, 254, 254)) invert(70%);
    display: flex;
    /* width: 30%; */
    margin: 10px;
    &.icon {
        height: 50px;
    }
    @media screen and (max-width: 576px) {
        img {
            opacity: 1;
        }
    }
    @media (max-width: 770px) {
        margin: 10px auto;
    }
    /* flex-direction: column;
    align-items: flex-end; */
}
/* .form-logo.icon {
    height: 50px;
} */

.form {
    display: flex;
    /* gap: 1.3rem; */
    justify-content: space-between;
    overflow: hidden;
    padding-left: 5px;
    align-items: center;
    align-content: center;
    min-height: 20px;
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    /* margin: 10px; */
    /* padding: 5px; */ /* original */
    /* margin: 0 auto; */
    /* position: left; */

    /* grid: minmax(400px, min-content) / repeat(auto-fill, 400px); */
    @media (min-width: 996px) {
        gap: 1.3rem;
    }
    @media screen and (max-width: 976px) {
        min-width: 50px;
    }
    @media screen and (max-width: 576px) {
        flex-direction: column;
        gap: 0.5rem;
        padding: 5px;
        align-items: baseline;
    }
    
}

@media screen and (min-width: 576px) {
    /* .splash-login {
        display: inline-flex;
        gap: 1.5rem;
        align-items: center;
        min-height: 50px;
        max-width: 100%;
        margin: 0 15px;
    } */
    .form-index {
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-areas: 
        "username username password password"
        "submit submit submit submit"
        "recovery recovery . .";
        justify-items: center;
    }
    
    .form-index > :nth-child(1) {
        grid-area: username;
    }
    .form-index > :nth-child(2) {
        grid-area: password;
    }
    .form-index > :nth-child(3) {
        grid-area: submit;
    }
    .form-index > :nth-child(4) {
        grid-area: recovery;
    }
}
/* .form .splash-login {
    display: inline-flex;
    gap: 1.5rem;
    align-items: center;
    min-height: 50px;
    max-width: 100%;
    margin: 0 15px;
} */
/* .form-index {
    display: flex;
    justify-content: center;
    align-content: center;
    /* margin-left: 20px;
    margin: 40px auto;
} */



.form-contact {
    margin-top: 20px;
    display: grid;
    padding: 12px;
    padding-top: 0;
    margin: 0 auto;
    gap: 1.2rem;
    max-width: 100%;
    width: 100%;
    min-height: 50px;
    /* grid: minmax(50px, min-content) / repeat(auto-fill, 400px); */
    @media screen and (max-width: 576px) {
        gap: 0;
        input {
            width: 400px;
            border-inline: 1px solid var(--border-color);
        }
        margin-top: 5%;
    }
    @media screen and (max-width: 425px) {
        justify-content: unset;
    }
}

#recovery-input {
    & > .signupsuccess {
        grid-template-columns: repeat(2, 400px);
    }
    gap: 1.2rem;
    @media (min-width: 996px) {
        width: 50vh;
    }
    /* margin: 20px auto; */
    input {
        width: 100%;
        margin: 0 auto;
    }
    .contact {
        display: block;
    }
    .btn {
        margin: 0 auto;
        /* gap: 15px; */
    }
    .form-contact {
        /* padding-top: 20px; */
        margin: 20px auto;
        margin-top: 0;
    }
}

.container {
    /* margin-bottom: 50px; */
    /* max-width: 100%; */
    /* min-height: 50px; */
    /* overflow: hidden; */
}

.contact {
    display: grid;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    width: 100%;
    min-height: 50px;
    /* max-width: 900px; */
}

.contact-grid {
    /* #recovery-input {
        @media screen and (min-width: 992px) {
            transform: unset;
        }
    } */
    &#recipe_creation {
        .btn {
            width: 100%;
            max-width: unset;
            margin-left: 0;
        }
        display: flex;
        /* background-color: pink; */
        /* grid-template-columns: 2, 1fr; */
        /* grid-template-columns: repeat(2, 400px);  */
        gap: 2rem;
        /* grid-template-columns: repeat(2, 1fr); */
        align-items: unset;
    }
    display: grid;
    justify-content: center;
    /* grid: minmax(50px, min-content) / repeat(auto-fill, minmax(400px, 650px)); */
    /* grid-template-columns: repeat(2, auto); */
    grid-template-columns: repeat(2, 1fr);

    align-items: center;
    align-content: center;
    justify-items: end;
    @media screen and (max-width: 992px) {
        margin: 15px;
    }
    @media screen and (min-width: 992px) {
        &:not(#recovery-page) {
            /* transform: translateX(-70px); */
        }
    }
    @media screen and (max-width: 576px) {
        margin: 0 auto;
        display: flex;
        flex-direction: column-reverse;
        img {
            height: 100%;
            position: fixed;
            right: 0;
            top: 0;
            opacity: 0.1;
            z-index: -1;
            filter: blur(1.5px);
        }
        .form-logo img {
            opacity: 1;
            position: unset;
            filter: blur(0);
        }
        .recipe {
            width: unset;
        }
    }
}

.pw-recovery {
    display: grid;
    justify-content: center;
    grid: minmax(50px, min-content) / repeat(auto-fill, minmax(400px, 650px));
    /* grid-template-columns: repeat(2, auto); */

    align-items: center;
    align-content: center;
    @media screen and (max-width: 992px) {
        margin: 15px;
    }
    @media screen and (max-width: 576px) {
        margin: 0 auto;
        display: flex;
        flex-direction: column-reverse;
        img {
            height: 100%;
            position: fixed;
            right: 0;
            top: 0;
            opacity: 0.1;
            z-index: -1;
        }
    }
}

.contact-img {
    max-width: calc(100vw - 70vw);
    @media (max-width: 992px) {
        max-width: calc(100vw - 50vw);
    }
}
/* END OF FORMS*/

#register-btn {
    flex-direction: row;
    justify-content: center;
}

@media screen and (max-width: 425px) {
    #btn {
        margin: 0 auto;
        /* padding: 0; */
    }
}

@media(prefers-reduced-motion) {
    .form-hidden {
        transition: none;
    }
}



.form:nth-child(1) {
    transition-delay: 100ms;
}
.form:nth-child(2) {
    transition-delay: 300ms;
}
.form:nth-child(3) {
    transition-delay: 500ms;
}

/* Sans focus une après saisie d'input */
.form__label {
    position: absolute;
    /* align-content: center; */
    /* top: 0; */
    /* top: 50%;
    left: 30%; */
    /* left: 0%; */
    top: -40%;
    /* right: 0; */
    /* bottom: 0; */
    left: 2%;
    /* bottom: 0; */
    /* right: 0; */
    /* display: block; */
    /* background-color: red; */
    /* background: purple; */
    transition: 0.2s;
    font-size: 1rem;
    width: auto;
    /* text-align: center; */
    /* border: inherit; */
    /* width: 10%; */
    color: white;
}

/* Position de la barre d'input */
.form__group {
    overflow: visible;
    position: relative;
    /* padding: 15px 0 0; */
    /* top: -50%; */
    /* top: 50%; */
    /* top: 20px; */
    /* top: 0; */
    /* left: 30%; */
    /* left: 0; */
    /* background-color: blue; */
    /* left: 0; */
    /* bottom: 50%; */
    /* top: 50%; */
    margin-top: 10px;
    /* border: inherit; */
    /* border: 1px solid brown; */
    width: 100%;
}

.form__field {
    /* top: 50%;
    right: -50%; */
    font-family: inherit;
    /* position: static; */
    width: 100%;
    /* border: inherit; */
    /* border-bottom: 1px solid white; */
    outline: 0;
    font-size: 1.3rem;
    color: white;
    padding: 7px 0;
    /* background: red; */
    transition: border-color 0.2s;

    &::placeholder {
        color: transparent;
        /* text-align: center; */
    }

    &:placeholder-shown ~ .form__label {
        /* --width : 100%; */
        font-size: 1.3rem;
        cursor: text;
        align-content: center;
        /* width: var(--width); */
        /* color: --navbar-color; */
        /* top: 35%; */
        top: 30%;
        /* bottom: 50%; */
        /* top: 20px; */
        /* background-color: green; */
        /* left: calc(var(--width) - 50%); */
        /* bottom: 40px; */
        left: 5%
    }
}

.form__field:focus {
    /* input, ::placeholder, :placeholder-shown, :focus::placeholder {
        all: unset;
    } */
    /* bottom: -50%; */
    ~ .form__label {
        
        position: absolute;
        display: block;
        /* overflow-block: hidden; */
        /* background-color: #fd690013; */
        /* content-visibility: auto; */
        /* background: opacity 1; */
        /* backdrop-filter: opacity(100%); */
        /* -webkit-backdrop-filter: opacity(100%); */
        /* z-index: 1000; */
        top: -40%;
        /* top: -100%; */
        /* right: 0; */
        /* bottom: 0; */
        left: 5%;
        transition: 0.2s;
        /* padding-top: 10px; */
        padding-bottom: 10px;
        font-size: 1rem;
        color: white;
        margin-bottom: 15px;
        font-weight:700;
        /* background: #000; */
        /* background: linear-gradient(to top, #7a7b7b 50%, rgba(0, 0, 255, 0) 50%); */
        /* background: linear-gradient(to top, #787979 50%, rgba(0, 0, 255, 0) 50%); */
        /* background: linear-gradient(to top, #747676 50%, rgba(0, 0, 255, 0) 50%); */
        /* background: linear-gradient(to top, #777879 50%, rgba(0, 0, 255, 0) 00%); */
        /* background: var(--input-background-color); */
    }
    /* padding-bottom: 6px; */
    /* padding-top: 7px; */
    font-weight: 700;
    /* background-color: pink; */
    margin-bottom: 15px;

    /* border-width: 3px;
    border-image: linear-gradient(to right, white,blue);
    border-image-slice: 1; */
}

.form__field {
    position: relative;
    /* top: 0;
    left: 0; */
    transition: 0.2s;
    &:required,&:invalid { box-shadow:none; }
}

.recipe {
    /* overflow: auto; */
    /* display: block; */
    /* right: 0; */
    /* top: 0;  */
    /* top: 60px; */
    /* width: 50vw; */
    /* margin: 0 auto; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    /* height: 100vh; */
    width: 50%;
    /* background-color: blue; */
    /* align-content: center; */
    &.open {
        position: absolute;
    }
}

.recipe.hidden {
    /* display: flex; */
}

.contact-section:has(.recipe.open) {
    display: flex;
    animation: slideToTop 1.5s ease-in-out;
}

@keyframes slideToTop {
    0% {
        transform: translateY(100vh);
        position: absolute;
    }
    100% {
        transform: translateY(0vh);
    }
}

.form-flex {
    /* display: grid; */
    display: flex;
    /* background-color: pink; */
    /* grid-template-columns: 2, 1fr; */
    /* grid-template-columns: repeat(2, 400px);  */
    gap: 1.5rem;
    /* width: 100%;
    height: 100%; */
    /* height: 100%; */
    /* overflow: auto; */
    /* justify-content: space-between; */
}

.form-recipe {
    /* background-color: red; */
    /* width: 50vw; */
    width: 100%;
    /* height: 100vh; */
    /* vertical-align: middle; */
    /* margin: 0 auto; */
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em;
    /* overflow: auto; */
    height: 100%;
    /* height: 100vh; */
    position: sticky;
    /* top: 50px; */
    top: 60px;
    & #register-btn {
        padding-left: 0;
    }
}

/* RECIPE CREATION */
.time {
    /* display: flex;
    align-items: center;
    flex-wrap: wrap; */
    display: grid;
    /* gap: 2rem; */
    grid-template-columns: repeat(3, 1fr);
    align-content: center;
    justify-items: start;
    align-items: center;
    input {
        width: 40px;
    }
    select {
        text-align: center;
        width: fit-content;
    }
}
.ingredient {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    display: grid;
    grid-gap: 5px;
    &>select {
        margin-left: 0;
        width: 100%;
    }
}

hr {
    border-bottom: 1px solid;
    width: 50%;
    margin: 30px auto;
}