/* Password Protected Page Custom Styles */

/* Hide the default logo */
body.login #password-protected-logo {
    display: none !important;
}

/* Add your custom logo */
body.login #login::before {
    content: "";
    display: block;
    width: 150px;
    height: 50px;
    background-image: url('../images/MoserContract.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 30px auto;
}

/* Style the login button */
body.login #wp-submit,
body.login .button.button-primary.button-large {
    background: #646464 !important;
    border: none !important;
    border-radius: 0px !important;
    padding: 12px 30px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: white !important;
    transition: background 500ms ease-out !important;
    width: 100% !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.login #wp-submit:hover,
body.login .button.button-primary.button-large:hover {
    background: #979797 !important;
    color: white !important;
    transition: background 200ms ease-out !important;
}

/* Style the password input */
body.login .password-input,
body.login #password_protected_pass {
    border-radius: 0px !important;
    border: 1px solid #ccc !important;
    /* padding: 12px 15px !important; */
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    transition: border-color 0.3s ease !important;
    box-shadow: none !important;
}

body.login .password-input:focus,
body.login #password_protected_pass:focus {
    border-color: #c5341c !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Style the show/hide password button */
body.login #pp-hide-show-password,
body.login .button.button-secondary {
    background: #646464 !important;
    border: 1px solid #ccc !important;
    border-radius: 0px !important;
    color: white !important;
    transition: background 500ms ease-out !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.login #pp-hide-show-password:hover,
body.login .button.button-secondary:hover {
    background: #979797 !important;
    color: white !important;
    transition: background 200ms ease-out !important;
}

/* Overall login form styling */
body.login #login {
    background: white !important;
    border-radius: 0px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    padding: 40px !important;
    max-width: 400px !important;
    margin: 50px auto !important;
}

/* Label styling */
body.login label[for="password_protected_pass"] {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    color: #646464 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Password wrapper styling */
body.login .user-pass-wrap {
    margin-bottom: 20px !important;
}

body.login .wp-pwd {
    display: flex !important;
    align-items: center !important;
}

body.login .wp-pwd .password-input {
    border-radius: 0px !important;
    flex: 1 !important;
}

/* Override WordPress admin styles */
body.login .login form {
    box-shadow: none !important;
    border: none !important;
}

body.login .login .message,
body.login #login_error {
    border-left: none !important;
    background: #f4f1ed !important;
    color: #646464 !important;
}