/**
 * Custom Login Page Styles
 * Professional, modern, non-WordPress appearance
 * Supports: Login, Lost Password, Registration, Reset Password pages
 */

/* =====================================================
   BASE STYLES & BACKGROUND
   ===================================================== */

body.login {
    background: linear-gradient(135deg, var(--hc-primary-color, #5bf4ff) 0%, #e8f8f8 50%, #f5fafa 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-family: var(--hc-font-family, 'Kanit', 'Roboto', sans-serif);
    margin: 0;
    /* Top-aligned with a comfortable gap above the floating logo */
    padding: clamp(40px, 8vh, 110px) 20px 40px;
    box-sizing: border-box;
}

/* Subtle background pattern */
body.login::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(91, 244, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(91, 244, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(91, 244, 255, 0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* =====================================================
   LOGO STYLING
   ===================================================== */

#login h1 a,
.login h1 a {
    /* Full LucyIQ logo (mark + wordmark), floating freely with no pill/panel.
       Light asset here; the dark variant is swapped in the prefers-color-scheme
       block below. Keep both in sync with HCFUNCTIONS::hc_get_full_logo_url(). */
    background-image: url('../assets/LucyIQ_logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    width: 100%;
    max-width: 360px;
    height: 84px;
    margin: 0 auto 30px;
    display: block;
    text-indent: -9999px;
    outline: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.3s ease;
}

#login h1 a:hover,
.login h1 a:hover {
    transform: scale(1.03);
}

/* =====================================================
   LOGIN FORM CONTAINER
   ===================================================== */

#loginform,
#lostpasswordform,
#registerform,
#resetpassform,
.login form {
    background: rgba(255, 255, 255, 0.98);
    border: none;
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Form wrapper */
#login {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* =====================================================
   FORM LABELS
   ===================================================== */

.login form .input,
.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"],
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--hc-font-family, 'Kanit', 'Roboto', sans-serif);
    background: #fafafa;
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin-top: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.login form .input:focus,
.login form input[type="text"]:focus,
.login form input[type="password"]:focus,
.login form input[type="email"]:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: var(--hc-primary-color, #ffdd00);
    background: #fff;
    outline: none;
    box-shadow:
        0 0 0 3px rgba(255, 221, 0, 0.2),
        inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.login form label {
    font-size: 14px;
    font-weight: 500;
    color: #444;
    display: block;
    margin-bottom: 4px;
    font-family: var(--hc-font-family, 'Kanit', 'Roboto', sans-serif);
}

.login form p {
    margin-bottom: 20px;
}

.login form p:last-of-type {
    margin-bottom: 0;
}

/* =====================================================
   SUBMIT BUTTON
   ===================================================== */

.login form .button-primary,
.login form #wp-submit,
.login #wp-submit {
    width: 100%;
    padding: 14px 24px;
    /* Brand blue (matches the info-message blue used on this page) */
    background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--hc-font-family, 'Kanit', 'Roboto', sans-serif);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
    margin-top: 10px;
    text-shadow: none;
}

.login form .button-primary:hover,
.login form #wp-submit:hover,
.login #wp-submit:hover {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(33, 150, 243, 0.5);
}

.login form .button-primary:active,
.login form #wp-submit:active,
.login #wp-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(33, 150, 243, 0.4);
}

.login form .button-primary:focus,
.login form #wp-submit:focus,
.login #wp-submit:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(33, 150, 243, 0.5),
        0 4px 15px rgba(33, 150, 243, 0.4);
}

/* =====================================================
   REMEMBER ME CHECKBOX
   ===================================================== */

.login .forgetmenot {
    display: flex;
    align-items: center;
    margin: 20px 0 !important;
}

.login .forgetmenot label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    margin: 0;
}

.login .forgetmenot input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: var(--hc-primary-color, #ffdd00);
    cursor: pointer;
}

/* Submit row alignment */
.login .submit {
    margin-top: 20px;
}

.login p.submit {
    display: block;
}

/* =====================================================
   NAVIGATION LINKS (Lost Password, Back to Blog, etc.)
   ===================================================== */

#nav,
#backtoblog,
.login #nav,
.login #backtoblog {
    text-align: center;
    margin: 20px auto 0;
    padding: 0;
}

#nav a,
#backtoblog a,
.login #nav a,
.login #backtoblog a {
    color: #444;
    text-decoration: none;
    font-size: 14px;
    font-family: var(--hc-font-family, 'Kanit', 'Roboto', sans-serif);
    transition: color 0.3s ease;
    padding: 5px 10px;
    display: inline-block;
}

#nav a:hover,
#backtoblog a:hover,
.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--hc-primary-color, #5bf4ff);
    text-decoration: underline;
}

/* Separator between nav links */
#nav {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.login #nav .sep,
#nav .sep {
    color: #999;
}

/* =====================================================
   ERROR & MESSAGE BOXES
   ===================================================== */

.login .message,
.login #login_error,
.login .success {
    border-radius: 10px;
    padding: 15px 20px;
    margin: 0 0 20px;
    font-size: 14px;
    font-family: var(--hc-font-family, 'Kanit', 'Roboto', sans-serif);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Info/Notice messages (blue) */
.login .message {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    border-left: 4px solid #2196f3;
}

/* Error messages (red) */
.login #login_error {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
    border-left: 4px solid #f44336;
}

/* Success messages (green) */
.login .success,
.login .message.success {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
    border-left: 4px solid #4caf50;
}

.login .message a,
.login #login_error a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.login .message a:hover,
.login #login_error a:hover {
    text-decoration: none;
}

/* =====================================================
   LOST PASSWORD PAGE SPECIFIC
   ===================================================== */

.login-action-lostpassword #loginform,
.login-action-lostpassword form {
    padding-bottom: 40px;
}

.login-action-lostpassword .message {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    color: #f57f17;
    border-left: 4px solid #ffc107;
}

/* =====================================================
   REGISTRATION PAGE SPECIFIC
   ===================================================== */

.login-action-register #registerform {
    padding-bottom: 40px;
}

.login-action-register #reg_passmail {
    font-size: 13px;
    color: #666;
    margin-top: 15px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 8px;
    line-height: 1.5;
}

/* =====================================================
   RESET PASSWORD PAGE SPECIFIC
   ===================================================== */

.login-action-rp #resetpassform,
.login-action-resetpass #resetpassform {
    padding-bottom: 40px;
}

.login-action-rp .user-pass1-wrap,
.login-action-resetpass .user-pass1-wrap {
    margin-bottom: 20px;
}

/* Password strength indicator */
#pass-strength-result {
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    margin: 10px 0;
    background: #f5f5f5;
}

#pass-strength-result.short {
    background: #ffcdd2;
    color: #c62828;
}

#pass-strength-result.bad {
    background: #ffe0b2;
    color: #e65100;
}

#pass-strength-result.good {
    background: #fff9c4;
    color: #f9a825;
}

#pass-strength-result.strong {
    background: #c8e6c9;
    color: #2e7d32;
}

/* Password visibility toggle */
.wp-pwd {
    position: relative;
}

.wp-pwd .button.wp-hide-pw {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #666;
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.wp-pwd .button.wp-hide-pw:hover {
    color: var(--hc-primary-color, #ffdd00);
    background: transparent;
}

.wp-pwd .button.wp-hide-pw:focus {
    outline: none;
    box-shadow: none;
}

/* Reset page polish (2026-10-06). The eye sat low because .wp-pwd here also wraps the
   strength bar, so "top: 50%" was half of field + bar; pin it to the field instead. */
.login-action-rp .wp-pwd .button.wp-hide-pw,
.login-action-resetpass .wp-pwd .button.wp-hide-pw {
    top: 26px;
}

.login-action-rp #pass-strength-result,
.login-action-resetpass #pass-strength-result {
    border: 0;
    margin: 8px 0 12px;
}

/* One rule, stated plainly (hc_password_missing). WordPress's strength word and its
   "Confirm use of weak password" tick are hidden: they praised and admitted passwords we
   do not accept. #hc-pw-rule says what is still missing, and only turns green when met. */
.login-action-rp #pass-strength-result,
.login-action-resetpass #pass-strength-result,
.login-action-rp .pw-weak,
.login-action-resetpass .pw-weak {
    display: none !important;
}

#hc-pw-rule {
    margin: 8px 0 12px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

#hc-pw-rule.hc-pw-rule--no {
    background: #f3f4f6;
    color: #4b5563;
}

#hc-pw-rule.hc-pw-rule--ok {
    background: #c8e6c9;
    color: #2e7d32;
}

.login-action-rp .indicator-hint,
.login-action-resetpass .indicator-hint {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 16px;
}

/* "Generate Password" was WordPress's stock outline button beside our own Save button.
   Same width, radius and font as Save, but quiet, so Save stays the one main action. */
.login form .button.wp-generate-pw {
    display: block;
    width: 100%;
    height: auto;
    min-height: 48px;
    margin: 0 0 14px;
    padding: 12px 16px;
    background: transparent;
    border: 1.5px solid #d5d9e6;
    border-radius: 10px;
    color: #2a2aff;
    font-family: var(--hc-font-family, 'Kanit', 'Roboto', sans-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.login form .button.wp-generate-pw:hover,
.login form .button.wp-generate-pw:focus {
    border-color: #2a2aff;
    background: rgba(42, 42, 255, 0.05);
    color: #2a2aff;
    box-shadow: none;
    outline: none;
}

@media (prefers-color-scheme: dark) {
    .login form .button.wp-generate-pw,
    .login form .button.wp-generate-pw:hover,
    .login form .button.wp-generate-pw:focus {
        color: #aab4ff;
        border-color: #4a5380;
    }
}

/* =====================================================
   CUSTOM FOOTER
   ===================================================== */

.hc-login-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 30px;
    padding: 20px;
}

.hc-login-footer p {
    color: #666;
    font-size: 13px;
    font-family: var(--hc-font-family, 'Kanit', 'Roboto', sans-serif);
    margin: 0;
}

/* =====================================================
   PRIVACY POLICY LINK
   ===================================================== */

.login .privacy-policy-page-link {
    text-align: center;
    margin-top: 15px;
}

.login .privacy-policy-page-link a {
    color: #666;
    font-size: 12px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.login .privacy-policy-page-link a:hover {
    color: #333;
    text-decoration: underline;
}

/* =====================================================
   LANGUAGE SWITCHER (if enabled)
   ===================================================== */

.login .language-switcher {
    margin-top: 20px;
    text-align: center;
}

.login .language-switcher select {
    padding: 8px 15px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background: #fff;
    color: #444;
    font-family: var(--hc-font-family, 'Kanit', 'Roboto', sans-serif);
    cursor: pointer;
}

.login .language-switcher button {
    padding: 8px 15px;
    margin-left: 10px;
    border: none;
    border-radius: 8px;
    background: var(--hc-primary-color, #ffdd00);
    color: #1a1a2e;
    font-weight: 500;
    cursor: pointer;
}

/* =====================================================
   INTERIM LOGIN (Popup Login)
   ===================================================== */

.interim-login #login {
    padding-top: 0;
}

.interim-login.login h1 a {
    width: 100%;
    max-width: 320px;
    height: 64px;
}

/* =====================================================
   TWO FACTOR AUTHENTICATION SUPPORT
   ===================================================== */

.login-action-backup_2fa #loginform,
.login-action-validate_2fa #loginform {
    padding: 40px;
}

/* =====================================================
   HIDE WORDPRESS BRANDING
   ===================================================== */

/* Hide the WordPress "← Go to site" text if it shows WordPress branding */
.login #backtoblog a::before {
    content: none;
}

/* The "Go to {site}" link is removed in PHP (login_site_html_link). WordPress still
   prints the empty <p id="backtoblog"> wrapper, so hide it and reclaim its spacing.
   Client subsites have no front end, so the link was always a dead end. */
.login #backtoblog,
body.login #backtoblog {
    display: none !important;
}

/* =====================================================
   RESPONSIVE DESIGN - TABLET
   ===================================================== */

@media screen and (max-width: 768px) {
    body.login {
        padding: 56px 15px 30px;
    }

    #login {
        padding: 15px;
    }

    #login h1 a,
    .login h1 a {
        background-image: url('../assets/LucyIQ_logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        width: 100%;
        max-width: 340px;
        height: 76px;
        margin: 0 auto 25px;
    }

    #loginform,
    #lostpasswordform,
    #registerform,
    #resetpassform,
    .login form {
        padding: 30px;
        border-radius: 14px;
    }

    .login form .input,
    .login form input[type="text"],
    .login form input[type="password"],
    .login form input[type="email"],
    .login input[type="text"],
    .login input[type="password"],
    .login input[type="email"] {
        padding: 12px 16px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .login form .button-primary,
    .login form #wp-submit,
    .login #wp-submit {
        padding: 14px 20px;
        font-size: 15px;
    }

    #nav,
    #backtoblog {
        flex-direction: column;
        gap: 10px;
    }

    #nav a,
    #backtoblog a {
        font-size: 13px;
    }
}

/* =====================================================
   RESPONSIVE DESIGN - MOBILE
   ===================================================== */

@media screen and (max-width: 480px) {
    body.login {
        padding: 10px;
        justify-content: flex-start;
        padding-top: 40px;
    }

    #login {
        padding: 10px;
        width: 100%;
        box-sizing: border-box; /* width + padding overflowed the phone screen by 20px */
    }

    #login h1 a,
    .login h1 a {
        background-image: url('../assets/LucyIQ_logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        width: 100%;
        max-width: 300px;
        height: 68px;
        margin: 0 auto 20px;
    }

    #loginform,
    #lostpasswordform,
    #registerform,
    #resetpassform,
    .login form {
        padding: 25px 20px;
        border-radius: 12px;
        box-shadow:
            0 10px 40px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .login form label {
        font-size: 13px;
    }

    .login form .input,
    .login form input[type="text"],
    .login form input[type="password"],
    .login form input[type="email"],
    .login input[type="text"],
    .login input[type="password"],
    .login input[type="email"] {
        padding: 12px 14px;
        border-radius: 8px;
    }

    .login form .button-primary,
    .login form #wp-submit,
    .login #wp-submit {
        padding: 12px 18px;
        font-size: 14px;
        border-radius: 8px;
    }

    .login .forgetmenot label {
        font-size: 13px;
    }

    .login .message,
    .login #login_error,
    .login .success {
        padding: 12px 15px;
        font-size: 13px;
        border-radius: 8px;
    }

    .hc-login-footer {
        margin-top: 20px;
        padding: 15px;
    }

    .hc-login-footer p {
        font-size: 12px;
    }

    #nav a,
    #backtoblog a {
        font-size: 12px;
        padding: 8px;
    }
}

/* =====================================================
   SMALL MOBILE DEVICES
   ===================================================== */

@media screen and (max-width: 360px) {
    body.login {
        padding: 8px;
        padding-top: 30px;
    }

    #login h1 a,
    .login h1 a {
        background-image: url('../assets/LucyIQ_logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        width: 100%;
        max-width: 260px;
        height: 58px;
        margin: 0 auto 15px;
    }

    #loginform,
    #lostpasswordform,
    #registerform,
    #resetpassform,
    .login form {
        padding: 20px 15px;
    }

    .login form .input,
    .login form input[type="text"],
    .login form input[type="password"],
    .login form input[type="email"],
    .login input[type="text"],
    .login input[type="password"],
    .login input[type="email"] {
        padding: 10px 12px;
        font-size: 16px;
    }
}

/* =====================================================
   HIGH CONTRAST / ACCESSIBILITY
   ===================================================== */

@media (prefers-contrast: high) {
    #loginform,
    #lostpasswordform,
    #registerform,
    #resetpassform,
    .login form {
        border: 2px solid #333;
    }

    .login form .input,
    .login form input[type="text"],
    .login form input[type="password"],
    .login form input[type="email"] {
        border-width: 2px;
    }

    .login form .button-primary,
    .login form #wp-submit,
    .login #wp-submit {
        border: 2px solid #1a1a2e;
    }
}

/* =====================================================
   REDUCED MOTION PREFERENCE
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    body.login::before {
        animation: none;
    }

    #login h1 a:hover,
    .login h1 a:hover {
        transform: none;
    }

    .login form .button-primary:hover,
    .login form #wp-submit:hover,
    .login #wp-submit:hover {
        transform: none;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   DARK MODE PREFERENCE (pre-login, device-driven)
   -----------------------------------------------------
   The login screen has no account context yet, so it follows the
   visitor's DEVICE setting via prefers-color-scheme. After login, the
   app's own light/dark/auto setting takes over (handled in wp-admin,
   not here). The logo swaps to the dark-mode mark.
   ===================================================== */

@media (prefers-color-scheme: dark) {
    body.login {
        background: linear-gradient(135deg, #0e2a2e 0%, #13181b 55%, #0b0e10 100%);
    }

    /* Logo: dark-mode full logo, floating (no panel). Keep the asset in sync
       with HCFUNCTIONS::hc_get_full_logo_url()'s dark variant. */
    #login h1 a,
    .login h1 a {
        background-image: url('../assets/LucyIQ_logo_DARKMODE.png');
        background-color: transparent;
        box-shadow: none;
    }

    /* Form card */
    #loginform,
    #lostpasswordform,
    #registerform,
    #resetpassform,
    .login form {
        background: #1e2428;
        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    /* Text inputs */
    .login form .input,
    .login form input[type="text"],
    .login form input[type="password"],
    .login form input[type="email"],
    .login input[type="text"],
    .login input[type="password"],
    .login input[type="email"] {
        background: #2a3137;
        border-color: #3a444b;
        color: #e6e6e6;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .login form .input:focus,
    .login form input[type="text"]:focus,
    .login form input[type="password"]:focus,
    .login form input[type="email"]:focus,
    .login input[type="text"]:focus,
    .login input[type="password"]:focus,
    .login input[type="email"]:focus {
        background: #2f373d;
        border-color: var(--hc-primary-color, #ffdd00);
    }

    /* Keep dark inputs dark when the browser autofills them */
    .login input:-webkit-autofill,
    .login input:-webkit-autofill:hover,
    .login input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #2a3137 inset !important;
        -webkit-text-fill-color: #e6e6e6 !important;
        caret-color: #e6e6e6;
    }

    /* Submit button: brighter blue so it stands out on the dark card */
    .login form .button-primary,
    .login form #wp-submit,
    .login #wp-submit {
        background: linear-gradient(135deg, #3b9bf0 0%, #1c6fd0 100%);
        color: #ffffff;
        box-shadow: 0 4px 15px rgba(33, 150, 243, 0.45);
    }

    .login form .button-primary:hover,
    .login form #wp-submit:hover,
    .login #wp-submit:hover {
        background: linear-gradient(135deg, #56acf7 0%, #2680de 100%);
        box-shadow: 0 6px 25px rgba(33, 150, 243, 0.55);
    }

    .login form label {
        color: #cfd3d6;
    }

    .login .forgetmenot label {
        color: #aab0b4;
    }

    /* Navigation links (lost password / back to site) */
    #nav a,
    #backtoblog a,
    .login #nav a,
    .login #backtoblog a {
        color: #aab0b4;
    }

    .login #nav .sep,
    #nav .sep {
        color: #6b7378;
    }

    /* Footer + privacy link */
    .hc-login-footer p,
    .login .privacy-policy-page-link a {
        color: #9aa0a4;
    }

    .login .privacy-policy-page-link a:hover {
        color: #cfd3d6;
    }

    /* Neutral grey panels (registration note, password-strength default) */
    .login-action-register #reg_passmail,
    #pass-strength-result {
        background: #2a3137;
        color: #cfd3d6;
    }

    /* Language switcher dropdown */
    .login .language-switcher select {
        background: #2a3137;
        border-color: #3a444b;
        color: #e6e6e6;
    }

    /* Password show/hide toggle */
    .wp-pwd .button.wp-hide-pw {
        color: #aab0b4;
    }
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {
    body.login {
        background: #fff;
    }

    body.login::before {
        display: none;
    }

    #login h1 a {
        filter: none;
    }

    #loginform,
    .login form {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .hc-login-footer,
    #nav,
    #backtoblog {
        display: none;
    }
}