/* TimeTag Login Customizer Styles */

/* Body and background */
body.login {
    background: #2c2c2c !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Login form container - Fixed for all login page types */
#login {
    width: 400px !important;
    padding: 8% 0 0 !important;
    margin: 0 auto !important;
}

/* Specific fixes for register and lost password pages */
body.login-action-register #login,
body.login-action-lostpassword #login,
body.login-action-rp #login,
body.login-action-resetpass #login {
    width: 400px !important;
    padding: 5% 0 0 !important;
    margin: 0 auto !important;
}

/* Logo styling */
.login h1 {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.login h1 a {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 20px !important;
    display: block !important;
    text-indent: -9999px !important;
}

/* TimeTag title */
.login h1::after {
    content: 'TimeTag';
    display: block;
    color: #ffffff;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-top: 20px;
    text-indent: 0;
}

/* Form styling - Apply to all login forms */
#loginform,
#registerform,
#lostpasswordform,
#resetpassform {
    background: #3a3a3a !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    padding: 40px !important;
    margin-top: 20px !important;
}

/* Input labels - Apply to all forms */
#loginform label,
#registerform label,
#lostpasswordform label,
#resetpassform label {
    color: #cccccc !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Input fields - Apply to all forms */
#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#registerform input[type="text"],
#registerform input[type="password"],
#registerform input[type="email"],
#lostpasswordform input[type="text"],
#lostpasswordform input[type="password"],
#lostpasswordform input[type="email"],
#resetpassform input[type="text"],
#resetpassform input[type="password"],
#resetpassform input[type="email"] {
    background: #4a4a4a !important;
    border: 1px solid #5a5a5a !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#loginform input[type="email"]:focus,
#registerform input[type="text"]:focus,
#registerform input[type="password"]:focus,
#registerform input[type="email"]:focus,
#lostpasswordform input[type="text"]:focus,
#lostpasswordform input[type="password"]:focus,
#lostpasswordform input[type="email"]:focus,
#resetpassform input[type="text"]:focus,
#resetpassform input[type="password"]:focus,
#resetpassform input[type="email"]:focus {
    background: #525252 !important;
    border-color: #ffd700 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2) !important;
}

/* Password visibility toggle */
.wp-pwd {
    position: relative !important;
}

.wp-pwd input[type="password"],
.wp-pwd input[type="text"] {
    padding-right: 50px !important;
}

.wp-pwd .button.wp-hide-pw {
    background: transparent !important;
    border: none !important;
    color: #cccccc !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    cursor: pointer !important;
}

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

/* Remember me checkbox */
#loginform .forgetmenot {
    margin: 20px 0 !important;
}

#loginform .forgetmenot input[type="checkbox"] {
    margin-right: 8px !important;
    width: auto !important;
}

#loginform .forgetmenot label {
    color: #cccccc !important;
    font-size: 14px !important;
    display: inline !important;
    margin: 0 !important;
}

/* Forgot password link */
#nav a {
    color: #ffd700 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    float: right !important;
    margin-top: -10px !important;
}

#nav a:hover {
    color: #ffed4e !important;
    text-decoration: underline !important;
}

/* Register link */
#backtoblog a {
    color: #ffd700 !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

#backtoblog a:hover {
    color: #ffed4e !important;
    text-decoration: underline !important;
}

/* New user register text */
.login #nav {
    text-align: center !important;
    margin: 20px 0 !important;
    color: #cccccc !important;
}

.login #nav::before {
    content: 'New user? ';
    color: #cccccc;
}

/* Submit buttons - Apply to all forms */
#loginform .submit,
#registerform .submit,
#lostpasswordform .submit,
#resetpassform .submit {
    text-align: center !important;
    margin-top: 30px !important;
}

#loginform .submit input[type="submit"],
#registerform .submit input[type="submit"],
#lostpasswordform .submit input[type="submit"],
#resetpassform .submit input[type="submit"],
.login .button-primary {
    background: #ffd700 !important;
    border: none !important;
    border-radius: 8px !important;
    color: #2c2c2c !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 40px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

#loginform .submit input[type="submit"]:hover,
#registerform .submit input[type="submit"]:hover,
#lostpasswordform .submit input[type="submit"]:hover,
#resetpassform .submit input[type="submit"]:hover,
.login .button-primary:hover {
    background: #ffed4e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;
}

#loginform .submit input[type="submit"]:active,
#registerform .submit input[type="submit"]:active,
#lostpasswordform .submit input[type="submit"]:active,
#resetpassform .submit input[type="submit"]:active,
.login .button-primary:active {
    transform: translateY(0) !important;
}

/* Error messages */
#login_error,
.login .message {
    background: #ff4757 !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    margin: 0 0 20px 0 !important;
}

.login .message {
    background: #2ed573 !important;
}

/* Remove WordPress logo */
.login h1 a {
    background-image: none !important;
}

/* Additional form-specific styling */
/* Register form specific */
#registerform p.description {
    color: #cccccc !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
}

/* Lost password form specific */
#lostpasswordform p {
    color: #cccccc !important;
    margin-bottom: 16px !important;
}

/* Reset password form specific */
#resetpassform .pw-weak {
    color: #cccccc !important;
}

/* Navigation links styling for all pages */
.login #nav,
.login #backtoblog {
    text-align: center !important;
    margin: 20px 0 !important;
    padding: 0 !important;
}

.login #nav a,
.login #backtoblog a {
    color: #ffd700 !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

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

/* Responsive design */
@media screen and (max-width: 480px) {
    #login {
        width: 90% !important;
        padding: 5% 5% 0 !important;
    }
    
    #loginform,
    #registerform,
    #lostpasswordform,
    #resetpassform {
        padding: 30px 20px !important;
    }
    
    .login h1::after {
        font-size: 28px !important;
    }
    
    /* Responsive fixes for register and lost password pages */
    body.login-action-register #login,
    body.login-action-lostpassword #login,
    body.login-action-rp #login,
    body.login-action-resetpass #login {
        width: 90% !important;
        padding: 5% 5% 0 !important;
    }
}

/* Loading state */
.login .spinner {
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDNWN00xNyAxMEgxM00xMCAxN1YxM00zIDEwSDciIHN0cm9rZT0iI2ZmZDcwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+') no-repeat !important;
    background-size: 20px 20px !important;
    width: 20px !important;
    height: 20px !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}