/* Login Page Styles */

/* Import variables if not already loaded (wp-login.php doesn't load frontend styles) */
:root {
    --ja-color-danger: #ef4444;
    --ja-color-danger-light: #fee2e2;
    --ja-color-danger-dark: #991b1b;
    --ja-text-primary: #1f2937;
    --ja-text-secondary: #6b7280;
    --ja-radius-lg: 8px;
    --ja-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
    --ja-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.login {
    font-family: var(--ja-font-family);
}

/* Style the error message box */
.login #login_error {
    border-left-color: var(--ja-color-danger) !important;
    border-radius: var(--ja-radius-lg);
    box-shadow: var(--ja-shadow-md);
    background-color: #fff;
    color: var(--ja-text-primary);
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 14px;
}

/* Style links inside error, e.g. "Lost your password?" */
.login #login_error a {
    color: var(--ja-color-danger-dark);
    text-decoration: underline;
}

.login #login_error a:hover {
    color: var(--ja-color-danger);
}

/* Optional: Soften the "ERROR:" prefix if possible, typically it's inside a strong tag */
.login #login_error strong {
    color: var(--ja-color-danger);
}

/* Ensure Logo looks good if it's there */
.login h1 a {
    background-size: contain;
    width: 100%;
    height: 100px;
    /* Adjust as needed */
    margin-bottom: 10px;
}