/* Login page only */
body[data-path="login"] .page-card,
body[data-path="login"] .login-content {
    border-radius: 16px;
    border: 1px solid var(--gold-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Change logo size */
body[data-path="login"] .app-logo {
  max-height: 64px;
}

/* Button styling */
body[data-path="login"] .btn-primary {
  border-radius: 12px;
  font-weight: 600;
}

body[data-path="login"] {
    background-color: var(--forest-color) !important;
}

body[data-path="login"]:before {
    content: " ";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url("/assets/moi/images/moi-bg.png") repeat center center;
    background-size: 40%;
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
}

body[data-path="login"] .navbar {
    display: none;
}

body[data-path="login"] .page-card-head h4, body[data-path="login"] .page-card-head h3, 
body[data-path="login"] .page-card-head h2, body[data-path="login"] .page-card-head h1 {
    color: var(--gold-light-color);
}

#page-login {
    position: relative;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
}

.for-login .page-card .page-card-body input[type=text], .for-login .page-card .page-card-body input[type=email], .for-login .page-card .page-card-body input[type=password], .for-forgot .page-card .page-card-body input[type=text], .for-forgot .page-card .page-card-body input[type=email], .for-forgot .page-card .page-card-body input[type=password], .for-login-with-email-link .page-card .page-card-body input[type=text], .for-login-with-email-link .page-card .page-card-body input[type=email], .for-login-with-email-link .page-card .page-card-body input[type=password], .for-signup .page-card .page-card-body input[type=text], .for-signup .page-card .page-card-body input[type=email], .for-signup .page-card .page-card-body input[type=password], .for-email-login .page-card .page-card-body input[type=text], .for-email-login .page-card .page-card-body input[type=email], .for-email-login .page-card .page-card-body input[type=password] {
    background-color: color-mix(in srgb, var(--gold-light-color) 50%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--forest-dark-color) 20%, transparent) !important;
    border-radius: 8px;
    color: var(--forest-dark-color) !important;
}

body {
    color: var(--forest-dark-color) !important;
}

.for-login .page-card .page-card-body input[type=text]::placeholder, .for-login .page-card .page-card-body input[type=email]::placeholder, .for-login .page-card .page-card-body input[type=password]::placeholder, .for-forgot .page-card .page-card-body input[type=text]::placeholder, .for-forgot .page-card .page-card-body input[type=email]::placeholder, .for-forgot .page-card .page-card-body input[type=password]::placeholder, .for-login-with-email-link .page-card .page-card-body input[type=text]::placeholder, .for-login-with-email-link .page-card .page-card-body input[type=email]::placeholder, .for-login-with-email-link .page-card .page-card-body input[type=password]::placeholder, .for-signup .page-card .page-card-body input[type=text]::placeholder, .for-signup .page-card .page-card-body input[type=email]::placeholder, .for-signup .page-card .page-card-body input[type=password]::placeholder, .for-email-login .page-card .page-card-body input[type=text]::placeholder, .for-email-login .page-card .page-card-body input[type=email]::placeholder, .for-email-login::placeholder
{
    color: color-mix(in srgb, var(--forest-dark-color) 50%, transparent) !important;
}

/* .page-card-body svg, .email-field svg, .password-field svg,  .email-field svg path, .password-field svg path {
    stroke: var(--forest-color) !important;
} */

.for-login .page-card .page-card-body .forgot-password-message > *, .for-forgot .page-card .page-card-body .forgot-password-message > *, .for-login-with-email-link .page-card .page-card-body .forgot-password-message > *, .for-signup .page-card .page-card-body .forgot-password-message > *, .for-email-login .page-card .page-card-body .forgot-password-message > * {
    color: var(--forest-color) !important;
}

p.forgot-password-message {
    margin-top: -10px;
}

button.btn.btn-sm.btn-primary.btn-block.btn-login, button.btn-login-with-email-link {
    background-color: var(--gold-color) !important;
    border-radius: 50px !important;
    padding: 10px 16px !important;
    color: var(--forest-color) !important;
    font-weight: 700 !important;
}

button.btn.btn-sm.btn-primary.btn-block.btn-login:hover, button.btn-login-with-email-link:hover {
    background-color: var(--forest-color) !important;
    color: var(--gold-light-color) !important;
}

button.btn.btn-sm.btn-primary.btn-block.btn-login:focus, button.btn.btn-sm.btn-primary.btn-block.btn-login:active, button.btn-login-with-email-link:focus, button.btn-login-with-email-link:active {
    background-color: var(--forest-dark-color) !important;
    color: var(--gold-light-color) !important;
}

.login-button-wrapper a {
    background-color: var(--gold-light-color) !important;
    border: 1px solid var(--gold-color) !important;
    border-radius: 50px;
    padding: 8px 16px !important;
    color: var(--forest-color) !important;
    font-weight: 700 !important;
}

.login-button-wrapper a:hover {
    background-color: var(--gold-color) !important;
}

.login-button-wrapper a:focus, .login-button-wrapper a:active {
    background-color: var(--gold-dark-color) !important;
}

.for-login .page-card .page-card-body .login-divider, .for-forgot .page-card .page-card-body .login-divider, .for-login-with-email-link .page-card .page-card-body .login-divider, .for-signup .page-card .page-card-body .login-divider, .for-email-login .page-card .page-card-body .login-divider {
    margin: 10px;
    line-height: 1;
    color: var(--forest-dark-color) !important;
}

#login_password {
    padding-left: 38px;
}