/* Custom Login Page Styles for What If Tales */

/* Overall background for the login page */
body.login {
    background: #f9f9f9 !important; /* Light, neutral background similar to dashboard wrapper */
}

/* Login box container */
#login {
    width: 380px !important; /* Slightly wider login box for better spacing */
    padding: 20px !important;
    background: #ffffff !important; /* White background for the form box */
    border-radius: 15px !important; /* Rounded corners for a softer look */
    box-shadow: 0 5px 20px rgba(140, 122, 230, 0.2) !important; /* Soft shadow using primary purple */
    margin-top: 50px !important; /* Adjust vertical position */
}

/* WordPress Logo (top of the form) */

#login h1 a {
    background-image: url('https://whatiftales.com/wp-content/uploads/2025/06/WhatifTales_logo-1.png') !important; /* REPLACE WITH YOUR LOGO URL */
    height: 150px !important; /* Increase this value to make the logo taller */
    width: 100% !important; /* Keep 100% to fill available width, or set a fixed pixel width */
    background-size: contain !important; /* Ensures the entire logo fits within the specified height/width */
    background-repeat: no-repeat !important;
    background-position: center center !important; /* Center the logo */
    padding-bottom: 0px !important; /* Remove default padding */
    margin-bottom: 20px !important; /* Add space below logo */
}

/* Login Form background */
#loginform {
    background: #ffffff !important; /* Ensure form background is white */
    padding: 25px 25px 20px !important; /* Adjust padding inside the form */
    border: 1px solid #e0e0e0 !important; /* Light border around the form */
    border-radius: 10px !important; /* Rounded corners for the form itself */
    box-shadow: none !important; /* Remove default box shadow if any */
}

/* Labels for input fields */
.login label {
    font-size: 14px !important;
    color: #30336b !important; /* Dark blue for labels */
    font-family: 'Comic Sans MS', cursive, sans-serif !important; /* Fun font for labels */
    font-weight: bold !important;
}

/* Input fields (Username, Password) */
.login input[type="text"],
.login input[type="password"] {
    background-color: #f9f9f9 !important; /* Light grey background for fields */
    color: #30336b !important; /* Dark blue for input text */
    border: 1px solid #8c7ae6 !important; /* Playful purple border */
    border-radius: 5px !important; /* Rounded borders */
    padding: 10px 12px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    width: 100% !important; /* Full width */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07) !important; /* Subtle inner shadow */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Input fields on focus */
.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: #f0932b !important; /* Vibrant orange border on focus */
    box-shadow: 0 0 0 2px rgba(240, 147, 43, 0.2) !important; /* Soft orange glow */
    outline: none !important;
}

/* Remember Me checkbox label */
.login .forgetmenot label {
    color: #6a5acd !important; /* Darker purple for "Remember Me" text */
    font-weight: normal !important;
    font-size: 13px !important;
}

/* Login Button */
/*** .login .wp-submit { **/
.wp-core-ui .button-primary {    
    
    background-color: #f0932b !important; /* Vibrant orange for the button */
    color: #ffffff !important; /* White text */
    border: none !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    width: 100% !important; /* Full width button */
    transition: background-color 0.2s ease !important;
}

.login .wp-submit:hover,
.login .wp-submit:focus {
    background-color: #eb7a00 !important; /* Darker orange on hover/focus */
    outline: none !important;
}

/* Lost password and Back to blog links */
#nav, #backtoblog {
    font-size: 13px !important;
    padding: 15px 0 0 !important;
    text-align: center !important;
    margin: 0 !important;
}

#nav a, #backtoblog a {
    color: #8c7ae6 !important; /* Playful purple for these links */
    text-decoration: none !important;
    font-family: 'Comic Sans MS', cursive, sans-serif !important;
    transition: color 0.2s ease !important;
}

#nav a:hover, #backtoblog a:hover {
    color: #f0932b !important; /* Vibrant orange on hover */
    text-decoration: underline !important;
}

/* Error messages */
.login .message,
.login #login_error {
    background-color: #f7d794 !important; /* Sunny yellow for messages/errors */
    color: #30336b !important; /* Dark blue text */
    border-left: 4px solid #f0932b !important; /* Vibrant orange border */
    padding: 12px !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
    border-radius: 5px !important;
}

/* Hidden elements often found on default login */
#rcp_login_form {
    background-color: #ffffff !important; /* Ensure RCP form background is white */
    padding: 20px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}
/* You may need to add more specific selectors depending on other plugins adding to your login page */

/* Adjustments for responsiveness if needed - very basic */
@media screen and (max-width: 768px) {
    #login {
        width: 90% !important; /* Make login box more responsive on smaller screens */
        max-width: 380px !important;
    }
}