/* ═══════════════════════════════════════════════════════════════════ */
/* PLANVION - WORDPRESS LOGIN PAGE STYLING                            */
/* Matches the Planvion Design System (root-style.css)                */
/* ═══════════════════════════════════════════════════════════════════ */

/* Schriften: lokal aus assets/fonts.css, das als Abhaengigkeit dieses
   Stylesheets geladen wird — bewusst kein @import bei Google, siehe den
   Dateikopf von fonts.css. */

/* ─── Page Background ─────────────────────────────────────────────── */
body.login {
    background: #f8f8f8 !important;
    font-family: "Inter", sans-serif !important;
    display: flex;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

/* ─── Logo ────────────────────────────────────────────────────────── */
#login h1,
.login h1 {

}

#login h1 a,
.login h1 a {
    background-image: url('../assets/images/logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 675px !important;
    height: 300px !important;
        position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    margin: 0 0 24px 0 !important;
    display: block !important;
    padding: 0 !important;
}

/* ─── Login Form Card ─────────────────────────────────────────────── */
#loginform,
.login form {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    padding: 32px 32px 24px 32px !important;
    margin-top: 0 !important;
}

#login {
    width: 380px !important;
    padding: 8% 0 0 !important;
    margin: auto !important;
}

/* ─── Labels ──────────────────────────────────────────────────────── */
.login form .forgetmenot label,
.login label {
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #3c434a !important;
    letter-spacing: 0.01em !important;
}

/* ─── Input Fields ────────────────────────────────────────────────── */
.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"] {
    width: 100% !important;
    padding: 11px 14px !important;
    border: 2px solid #e2e4e7 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-family: "Inter", sans-serif !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    background: #fcfcfc !important;
    color: #3c434a !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
    box-shadow: none !important;
    height: auto !important;
}

.login form input[type="text"]:focus,
.login form input[type="password"]:focus,
.login form input[type="email"]:focus {
    border-color: #FF785F !important;
    outline: none !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 120, 95, 0.12) !important;
}

.login form input[type="text"]::placeholder,
.login form input[type="password"]::placeholder {
    color: #b0b5ba !important;
    font-weight: 400 !important;
}

/* ─── Password Toggle (Eye Icon) ─────────────────────────────────── */
.login .wp-pwd .button.wp-hide-pw {
    color: #999 !important;
    height: auto !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
}

.login .wp-pwd .button.wp-hide-pw:hover {
    color: #FF785F !important;
}

.login .wp-pwd .button.wp-hide-pw:focus {
    box-shadow: none !important;
    outline: none !important;
    color: #FF785F !important;
}

/* ─── Submit Button ───────────────────────────────────────────────── */
.login form .submit input[type="submit"],
.login form input[type="submit"],
.wp-core-ui .button-primary {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(135deg, #FF785F 0%, #ff6b45 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 13px 24px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: "Poppins", sans-serif !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(255, 120, 95, 0.3) !important;
    transition: all 0.25s ease !important;
    letter-spacing: 0.02em !important;
    text-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin-top: 16px !important;
}

.login form .submit input[type="submit"]:hover,
.login form input[type="submit"]:hover,
.wp-core-ui .button-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 120, 95, 0.4) !important;
    background: linear-gradient(135deg, #ff8a75 0%, #ff7b5a 100%) !important;
}

.login form .submit input[type="submit"]:active,
.login form input[type="submit"]:active,
.wp-core-ui .button-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(255, 120, 95, 0.3) !important;
}

.login form .submit input[type="submit"]:focus,
.login form input[type="submit"]:focus,
.wp-core-ui .button-primary:focus {
    box-shadow: 0 4px 14px rgba(255, 120, 95, 0.3) !important;
    outline: none !important;
}

/* ─── "Remember Me" Checkbox ──────────────────────────────────────── */
.login form .forgetmenot {
    margin-top: 4px !important;
}

.login form .forgetmenot input[type="checkbox"] {
    accent-color: #FF785F !important;
    border-radius: 4px !important;
}

/* ─── Submit Row Layout ───────────────────────────────────────────── */
.login form .submit {
    clear: both !important;
}

/* ─── Links below form ────────────────────────────────────────────── */
#login #nav,
#login #backtoblog {
    text-align: center !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
}

#login #nav a,
#login #backtoblog a,
.login #nav a,
.login #backtoblog a {
    color: #FF785F !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

#login #nav a:hover,
#login #backtoblog a:hover,
.login #nav a:hover,
.login #backtoblog a:hover {
    color: #D95D39 !important;
    text-decoration: underline !important;
}

/* Separator between links */
#login #nav {
    font-size: 0 !important;
}

#login #nav a {
    font-size: 14px !important;
}

/* ─── Error / Message Boxes ───────────────────────────────────────── */
#login_error,
.login .message,
.login .success {
    border-left: 4px solid #FF785F !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    padding: 14px 18px !important;
    margin-bottom: 16px !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    color: #3c434a !important;
}

#login_error {
    border-left-color: #EF4444 !important;
}

.login .success {
    border-left-color: #00c42a !important;
}

#login_error a {
    color: #FF785F !important;
    font-weight: 600 !important;
}

/* ─── "Powered by WordPress" footer ──────────────────────────────── */
.login .privacy-policy-page-link,
.login #login .privacy-policy-page-link {
    text-align: center !important;
    margin-top: 16px !important;
}

.login .privacy-policy-page-link a {
    color: #999 !important;
    font-size: 13px !important;
    font-family: "Inter", sans-serif !important;
}

.login .privacy-policy-page-link a:hover {
    color: #FF785F !important;
}

/* ─── Language Switcher ───────────────────────────────────────────── */
.language-switcher {
    font-family: "Inter", sans-serif !important;
    width: 380px !important;
    margin: 12px auto 0 auto !important;
    text-align: center !important;
}

.language-switcher select {
    border-radius: 8px !important;
    border: 2px solid #e2e4e7 !important;
    padding: 8px 12px !important;
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #3c434a !important;
}

.language-switcher select:focus {
    border-color: #FF785F !important;
    box-shadow: 0 0 0 3px rgba(255, 120, 95, 0.12) !important;
    outline: none !important;
}

.language-switcher .button {
    background: #FF785F !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: "Inter", sans-serif !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.language-switcher .button:hover {
    background: #ff6b45 !important;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #login {
        width: 90% !important;
        max-width: 380px !important;
        padding: 20% 0 0 !important;
    }

    .language-switcher {
        width: 90% !important;
        max-width: 380px !important;
    }

    #loginform,
    .login form {
        padding: 24px 20px 20px 20px !important;
    }

    #login h1 a,
    .login h1 a {
        width: 140px !important;
        height: 64px !important;
    }
}