/* ==========================================
   LITTLE MONKS SAFARIS
   CUSTOMER AUTH PAGES
========================================== */


:root {

    --black: #050807;
    --dark-green: #062e1b;
    --green: #0b5a34;
    --gold: #c9a227;
    --light-gold: #e4c766;
    --cream: #f8f3e7;
    --glass: rgba(255, 255, 255, .08);
    --border: rgba(201, 162, 39, .35);

}



* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



body {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Montserrat', sans-serif;

    color: var(--cream);


    background:

        linear-gradient(rgba(5, 8, 7, .85),
            rgba(5, 8, 7, .85)),

        url("https://images.unsplash.com/photo-1516426122078-c23e76319801");


    background-size: cover;

    background-position: center;


}



.auth-container {


    width: 90%;

    max-width: 430px;


    padding: 45px;


    background:

        rgba(255, 255, 255, .08);


    backdrop-filter: blur(18px);


    border:

        1px solid var(--border);


    border-radius: 25px;


    box-shadow:

        0 20px 60px rgba(0, 0, 0, .5);


    text-align: center;


}



.auth-container h1 {


    font-family: 'Playfair Display', serif;


    font-size: 2.4rem;


    margin-bottom: 35px;


    color: var(--cream);


}



.auth-container h1::first-letter {

    color: var(--gold);

}



.auth-container input {


    width: 100%;


    padding: 16px;


    margin-bottom: 20px;


    background:

        rgba(255, 255, 255, .08);


    border:

        1px solid var(--border);


    border-radius: 12px;


    color: white;


    outline: none;


    font-size: 1rem;


}



.auth-container input::placeholder {


    color: #ccc;

}



.auth-container input:focus {


    border-color: var(--gold);

}



.auth-container button {


    width: 100%;


    padding: 16px;


    border: none;


    border-radius: 50px;


    background: var(--gold);


    color: #000;


    font-weight: bold;


    cursor: pointer;


    transition: .5s;


    font-size: 1rem;


}



.auth-container button:hover {


    transform: translateY(-5px);


    background: var(--light-gold);


}


.auth-container p {


    margin-top: 25px;


    color: #ccc;


}


.auth-container a {


    color: var(--gold);


}



.auth-container a:hover {


    color: var(--light-gold);


}



/* MOBILE */


@media(max-width:500px) {


    .auth-container {

        width: 92%;

        padding: 35px 25px;

        border-radius: 20px;

    }



    .auth-container h1 {

        font-size: 2rem;

        margin-bottom: 30px;

    }



    .auth-container input {

        padding: 18px;

        font-size: 1.05rem;

        margin-bottom: 18px;

    }



    .auth-container button {

        padding: 18px;

        font-size: 1.05rem;

    }



    .auth-container p {

        font-size: 0.95rem;

        margin-top: 20px;

    }


}
.password-strength {

    margin-top: 8px;

    margin-bottom: 18px;

    font-size: .9rem;

    font-weight: 600;

    transition: .3s;

}

#passwordMatch {

    margin-top: 8px;

    margin-bottom: 18px;

    font-size: .9rem;

    font-weight: 600;

}
.password-field{

    position:relative;

    width:100%;

}

.password-field input{

    width:100%;

    padding:14px 48px 14px 15px;

    box-sizing:border-box;

}

.toggle-password{

    position:absolute;

    top:50%;

    right:15px;

    transform:translateY(-50%);

    cursor:pointer;

    user-select:none;

    font-size:18px;

    color:#777;

    transition:.3s;

    z-index:5;

}

.toggle-password:hover{

    color:#c9a227;

}