/**
 * Custom login page styles for Pretereo theme
 */

:root {
  --color-primary: #8e44ad;
  --color-secondary: #27ae60;
  --color-dark: #2c3e50;
  --color-light: #ecf0f1;
  --color-white: #ffffff;
  --color-gray: #95a5a6;
  --color-light-gray: #f5f5f5;
  --color-error: #e74c3c;
  --color-success: #2ecc71;
  
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;
  
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  
  --transition-fast: 0.2s ease;
}

body.login {
  background-color: var(--color-light);
  font-family: var(--font-primary);
}

.login h1 a {
  background-image: url('../images/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 320px;
  height: 80px;
  margin: 0 auto 20px;
}

.login form {
  background-color: var(--color-white);
  border-radius: var(--border-radius-md);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 26px 24px;
}

.login label {
  color: var(--color-dark);
  font-size: 14px;
  font-weight: 500;
}

.login form .input, 
.login input[type=text],
.login input[type=password] {
  background-color: var(--color-light-gray);
  border: 1px solid var(--color-gray);
  border-radius: var(--border-radius-sm);
  color: var(--color-dark);
  font-size: 16px;
  padding: 10px;
  margin-top: 5px;
}

.login form .input:focus, 
.login input[type=text]:focus,
.login input[type=password]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  outline: none;
}

.wp-core-ui .button-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  text-shadow: none;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
  background-color: #7d3c98;
  border-color: #7d3c98;
  color: var(--color-white);
}

.login #nav a, 
.login #backtoblog a {
  color: var(--color-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.login #nav a:hover, 
.login #backtoblog a:hover {
  color: var(--color-primary);
}

.login .message,
.login .success {
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.login #login_error {
  border-left: 4px solid var(--color-error);
  background-color: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.login .button.wp-hide-pw {
  color: var(--color-gray);
}

.login .button.wp-hide-pw:hover {
  color: var(--color-primary);
}

.login .privacy-policy-page-link a {
  color: var(--color-dark);
  text-decoration: none;
}

.login .privacy-policy-page-link a:hover {
  color: var(--color-primary);
}

.login .forgetmenot {
  margin-bottom: 15px;
}

.login .forgetmenot input[type=checkbox] {
  border-color: var(--color-gray);
}

.login .forgetmenot input[type=checkbox]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Password strength meter */
.login .pw-weak {
  margin-bottom: 15px;
}

.login .button.button-large {
  height: auto;
  padding: 10px 15px;
  font-size: 15px;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .login h1 a {
    width: 100%;
    background-size: 80% auto;
  }
}

@media screen and (max-width: 480px) {
  .login form {
    padding: 15px;
  }
  
  .login .button.button-large {
    width: 100%;
  }
}