/* Melange Menu login - left-aligned over hero image */

body.login {
    background-color: #0070b0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
}

/* Login card wrapper — single container with logo + form */
#login {
    padding: 32px !important;
    margin: 0 0 0 8vw !important;
    width: 380px !important;
    max-width: calc(100vw - 32px) !important;
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35) !important;
}

/* Hide default WP logo */
body.login h1 a,
body.login #login h1 a {
    display: none !important;
}

/* Brand (logo + text) now sits inside #login container, above form */
.mm-login-brand {
    text-align: center;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8edf3;
}
.mm-login-brand img {
    width: 80px; height: 80px; border-radius: 50%;
    background: #fff; padding: 8px; box-sizing: border-box;
    box-shadow: 0 6px 18px rgba(0,149,235,0.25);
    display: block; margin: 0 auto 8px;
}
.mm-login-brand-text {
    color: #1a2332;
    font-weight: 700; font-size: 18px;
    letter-spacing: 0.3px;
}

/* Form takes its place in the container, no own background/border */
.login form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

/* Labels + inputs */
.login label {
    font-size: 13px !important;
    color: #1a2332 !important;
    font-weight: 500 !important;
}
.login input[type=text],
.login input[type=password],
.login input[type=email] {
    border: 1px solid #e5ebf2 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    background: #fff !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login input[type=text]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus {
    border-color: #0095eb !important;
    box-shadow: 0 0 0 3px rgba(0,149,235,0.15) !important;
    outline: none !important;
}

.login .forgetmenot label { font-weight: 400 !important; }

.login .button-primary,
.wp-core-ui .button-primary {
    width: 100%;
    background: #0095eb !important;
    border-color: #0070b0 !important;
    box-shadow: 0 4px 14px rgba(0,149,235,0.35) !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
}
.login .button-primary:hover,
.login .button-primary:focus {
    background: #0070b0 !important;
}

/* Error/notice — render inline inside the #login container, above form */
.login #login_error,
.login .message,
.login .notice {
    border-radius: 10px !important;
    border-left: 4px solid #0095eb !important;
    background: #eaf5fe !important;
    color: #1a2332 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    margin: 0 0 16px 0 !important;
    width: auto !important;
    max-width: none !important;
}
.login #login_error { border-left-color: #e91e63 !important; background: #fdecef !important; color: #8a0b2e !important; }
.login .notice-success { border-left-color: #2fb54c !important; background: #e8f5e9 !important; color: #1e5c2a !important; }

/* Nav links — placed inside the #login container by WP, style in blue theme */
#login #nav, #login #backtoblog,
.login #nav, .login #backtoblog {
    text-align: center !important;
    margin: 14px 0 0 0 !important;
    padding: 12px 0 0 0 !important;
    border-top: 1px solid #e8edf3;
    width: auto !important;
    max-width: none !important;
}
#login #backtoblog { margin-top: 6px !important; padding-top: 0 !important; border-top: none !important; }
#login #nav a, #login #backtoblog a,
.login #nav a, .login #backtoblog a {
    color: #0095eb !important;
    font-size: 13px !important;
    text-decoration: none;
    text-shadow: none !important;
    font-weight: 500;
}
#login #nav a:hover, #login #backtoblog a:hover,
.login #nav a:hover, .login #backtoblog a:hover {
    color: #0070b0 !important;
    text-decoration: underline;
}

/* Hide language switcher completely */
.language-switcher,
#language-switcher,
.login-language-switcher,
body.login .language-switcher,
.login-action-login + .language-switcher {
    display: none !important;
}

/* Responsive: center on mobile/tablet met 20px buiten-padding */
@media (max-width: 900px) {
    body.login {
        justify-content: center !important;
        padding: 20px !important;
        box-sizing: border-box;
    }
    #login {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 400px !important;
    }
    .login #login_error, .login .message, .login .notice,
    #nav, #backtoblog {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 400px !important;
    }
    /* Blauwe knop krijgt extra lucht boven op mobiel */
    .login form .submit { padding-top: 20px !important; }
}
@media (max-width: 500px) {
    #login { padding: 22px !important; }
    .mm-login-brand img { width: 68px; height: 68px; }
    .mm-login-brand-text { font-size: 16px; }
}