/**
 * Custom Login Styler - Login Page Base Styles
 * 
 * These are base styles that provide a clean foundation.
 * Customized styles are added via inline CSS from the plugin settings.
 */

/* Smooth transitions for all elements */
body.login.cls-styled * {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Better text rendering */
body.login.cls-styled {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Center the login box better */
body.login.cls-styled #login {
    padding: 8% 0 0;
    margin: auto;
}

/* Remove default WordPress borders */
body.login.cls-styled form {
    border: none;
    margin-top: 20px;
}

/* Better input styling */
body.login.cls-styled .input,
body.login.cls-styled input[type="text"],
body.login.cls-styled input[type="password"] {
    margin-bottom: 10px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Password visibility toggle */
body.login.cls-styled .wp-pwd {
    position: relative;
}

body.login.cls-styled .wp-pwd .button.wp-hide-pw {
    background: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
    opacity: 0.6;
}

body.login.cls-styled .wp-pwd .button.wp-hide-pw:hover {
    opacity: 1;
}

/* Remember me checkbox styling */
body.login.cls-styled .forgetmenot {
    margin-top: 10px;
}

body.login.cls-styled .forgetmenot label {
    font-size: 13px;
}

/* Submit button full width option */
body.login.cls-styled .submit {
    margin-top: 15px;
}

body.login.cls-styled .submit input[type="submit"] {
    width: 100%;
}

/* Navigation links */
body.login.cls-styled #nav,
body.login.cls-styled #backtoblog {
    text-align: center;
    padding: 0;
    margin: 16px 0 0;
}

body.login.cls-styled #nav a,
body.login.cls-styled #backtoblog a {
    text-decoration: none;
}

body.login.cls-styled #nav a:hover,
body.login.cls-styled #backtoblog a:hover {
    text-decoration: underline;
}

/* Error/Message boxes */
body.login.cls-styled .message,
body.login.cls-styled #login_error {
    border-radius: 4px;
    margin-bottom: 16px;
}

body.login.cls-styled .message {
    border-left-color: #00a32a;
    background: #f0f6f1;
}

body.login.cls-styled #login_error {
    border-left-color: #d63638;
    background: #fcf0f1;
}

/* Privacy policy link */
body.login.cls-styled .privacy-policy-page-link {
    text-align: center;
    margin-top: 20px;
}

body.login.cls-styled .privacy-policy-page-link a {
    font-size: 12px;
    opacity: 0.8;
}

/* Language switcher */
body.login.cls-styled .language-switcher {
    margin-top: 20px;
}

/* Responsive adjustments */
@media screen and (max-width: 480px) {
    body.login.cls-styled #login {
        width: 90% !important;
        padding: 5% 0 0;
    }
    
    body.login.cls-styled form {
        padding: 20px !important;
    }
}

/* Animation for login form */
@keyframes cls-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.login.cls-styled #login {
    animation: cls-fadeIn 0.4s ease-out;
}

/* Focus visible for accessibility */
body.login.cls-styled .input:focus-visible,
body.login.cls-styled input[type="text"]:focus-visible,
body.login.cls-styled input[type="password"]:focus-visible,
body.login.cls-styled input[type="submit"]:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Loading state for button */
body.login.cls-styled input[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}