/* Temporary Hiding WP's Admin Bar */
#wpadminbar { display: none;}


/* ================================= Login Page ================================= */
.page-template-login-template .site {
    background-color: #F5F5F5;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
}
.login-section { width: 100%; height: 100%; display: flex;}
.login-image {
    height: 100%;
    object-fit: cover;
    max-width: 40%;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
}
.login-form-wrapper { width: 100%; max-width: 60%; display: flex; justify-content: center; align-items: center;}
.login-form {
    width: 100%; 
    max-width: 496px;
    background-color: var(--Global-White);
    padding: 32px;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
}
.login-form p { margin-bottom: -16px;}
.title-subtitle h3 {
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--Neutral-80);
}

.title-subtitle p {
    font-weight: 500;
    color: var(--Neutral-60);
}

.input-fields {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 32px;
}

.input-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--Neutral-40);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    padding: 14px 16px;
    box-sizing: border-box;
}

.input-field input {
    flex: 1;
    border: none;
    padding: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}
.input-field img { width: 24px; height: 24px; aspect-ratio: 1/1;}
.eye-icon { cursor: pointer;}
.legend {
    position: absolute;
    padding-inline: 4px;
    top: -8px;
    left: 16px;
    color: var(--Neutral-60); /* Same as your input field background */
    background-color: var(--Global-White);
}

/* ===============================End of Login Page ============================= */


@media (min-width: 1200px) and (max-width: 1365px) {
    .login-image { max-width: 50%;}
    .login-form-wrapper { max-width: 50%;}
    .login-form { padding: 28px; gap: 28px;}
    .input-fields { gap: 28px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
    .login-image { max-width: 50%;}
    .login-form-wrapper { max-width: 50%;}
    .login-form { padding: 26px; gap: 26px;}
    .input-fields { gap: 26px;}

}

@media (max-width: 991px){
    .login-image { max-width: 45%;}
    .login-form-wrapper { max-width: 50%; margin-inline: auto;}
    .login-form { padding: 24px; gap: 26px;}
    .input-fields { gap: 26px;}

    .input-field { gap: 8px;}
    .legend { top: -7px;}
    .input-field img { width: 20px; height: 20px;}
}

@media (max-width: 767px){
    .page-template-login-template .site { margin: 0; padding: 0;}

    .login-image { max-width: 100%; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
    .login-form-wrapper { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); max-width: 65%; margin-inline: auto;}
    .login-form { max-width: 100%;}

    .input-field { gap: 6px;}
    .legend { top: -7px;}
    .input-field img { width: 18px; height: 18px;}

}

@media (max-width: 575px){
    .login-form-wrapper { max-width: calc(100% - 32px); margin-inline: auto;}
    .login-form { max-width: 100%;}
}

@media (max-width: 375px){
    .login-form-wrapper { max-width: calc(100% - 32px); margin-inline: auto; top: 60%;}
    .login-form { max-width: 100%;}
}