/**
 * WordPress Login Page Custom Styles
 * Valderia Theme - Ultramarine background with custom branding
 *
 * @package Divi_Child_by_Divi_Extended
 * @since 1.0.0
 */

/* Ultramarine background for login page */
html.wp-toolbar body.login {
	background: linear-gradient(135deg, #1a3a52 0%, #0d2438 100%);
	background-attachment: fixed;
}

body.login {
	background: linear-gradient(135deg, #1a3a52 0%, #0d2438 100%);
	background-attachment: fixed;
	font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* Center the login form container */
body.login #login {
	margin-top: 100px;
	min-width: 400px;
	width:33vw
}

/* Style the login box */
.login form {
	background: #ffffff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	padding: 40px;
}

.login h1 {
	text-align: center;
	margin-bottom: 30px;
}

/* Replace WP logo with Valderia logo */
.login h1 a {
	background-image: url('LOGO_URL_HERE');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 280px;
	height: 80px;
	margin: 0 auto;
	text-indent: -9999px;
	overflow: hidden;
}

/* Input field styling */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login input[type="number"],
.login textarea,
.login select {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 10px;
	font-size: 16px;
	font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	transition: border-color 0.3s ease;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
.login input[type="number"]:focus,
.login textarea:focus,
.login select:focus {
	border-color: #1a3a52;
	box-shadow: 0 0 0 1px #1a3a52;
	outline: none;
}

/* Login button styling */
.login .button,
.login .button-primary,
.login input[type="submit"] {
	background-color: #1a3a52;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	padding: 12px 20px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.3s ease;
	text-shadow: none;
}

.login .button:hover,
.login .button-primary:hover,
.login input[type="submit"]:hover {
	background-color: #0d2438;
}

.login .button:active,
.login .button-primary:active,
.login input[type="submit"]:active {
	background-color: #051419;
}

/* Links styling */
.login a {
	color: #1a3a52;
	text-decoration: none;
	transition: color 0.3s ease;
}

.login a:hover {
	color: #0d2438;
	text-decoration: underline;
}

/* Remember me label */
.login label {
	font-size: 14px;
	color: #333;
}

/* Forgot password link area */
#backtoblog,
#nav {
	text-align: center;
	margin-top: 20px;
}
#backtoblog a,
#nav a,
.privacy-policy-page-link a {
	color: rgba(255, 255, 255, 0.9) !important;
}
#backtoblog a:hover,
#nav a:hover,
.privacy-policy-page-link a:hover {
	color: #ffc107 !important;
	text-decoration: underline;
}

/* Error message styling */
.login #login_error,
.login .message {
	background-color: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #333;
	margin-bottom: 20px;
	padding: 12px;
}

.login #login_error {
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
}

/* Shake animation for errors */
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
	20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.login.shake {
	animation: shake 0.3s ease-in-out;
}

#language-switcher {
    max-width: 185px;
    margin: 0 auto;
}