/* General Body and HTML styles */
body, html {
    height: 100%;
    background-color: #eeeeee !important;
}

/* Hide default WordPress elements including "Lost your password?" and "← Back to..." */
#login > h1, #login #backtoblog, #login #nav {
    display: none;
}

/* Main login form container */
#login {
    padding-top: 50px !important;
    width: 100% !important;
    max-width: 430px;
}

/* Card styles */
#loginform {
    background-color: #F7F7F7;
    padding: 40px !important;
    margin: 0 auto 25px !important;
    border-radius: 2px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 1px solid #ddd;
}

/* Logo image inside the form */
#loginform::before {
    content: '';
    display: block;
    background-image: url('images/logo.png'); /* IMPORTANT: Make sure this path is correct */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 80px;
    width: 100%;
    margin: 0 auto 25px;
}

/* Form input fields */
#loginform #user_login,
#loginform #user_pass {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    height: 44px;
    width: 100%;
    margin-bottom: 15px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 0 10px;
}

/* Input field focus style to match image */
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
    outline: 2px solid transparent;
}

/* Placeholder styling */
#loginform ::-webkit-input-placeholder { color: #999; }
#loginform ::-moz-placeholder { color: #999; }
#loginform :-ms-input-placeholder { color: #999; }
#loginform :-moz-placeholder { color: #999; }

/* Submit button container */
#loginform p.submit {
    border: none;
    padding: 0;
    margin: 5px 0 0 0;
}

/* Submit button */
#loginform #wp-submit {
    width: 100%;
    background-color: #9d2a38;
	color:#fff;
    padding: 0px;
    font-weight: 700;
    font-size: 14px;
    height: 40px;
    border-radius: 3px;
    border: none;
    transition: all 0.218s;
    text-shadow: none;
    box-shadow: none;
}

#loginform #wp-submit:hover,
#loginform #wp-submit:active,
#loginform #wp-submit:focus {
      opacity: 0.85;
      background-color: #9d2a38;
}

/* Hide default labels */
#loginform label {
    display: none;
}

/* Container for the links below the button (created by JS) */
.login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    clear: both;
    width: 100%; /* Ensure it takes full width */
}

/* Styling for "Forgot the password?" and "Requirements" links */
.login-links a.forgot-password,
.login-links a.requirements {
    color: #0073aa;
    text-decoration: none;
    font-size: 15px;
    position: static;
    float: none;
    display: inline;
    margin: 0;
}

.login-links a:hover {
    color: #9d2a38;
}

/* Forgot Password Panel styles */
.card-container.card {
    max-width: 400px;
    padding: 40px 40px;
}
.card {
    background-color: #F7F7F7;
    padding: 20px 25px 30px;
    margin: 0 auto 25px;
    margin-top: 50px;
    border-radius: 2px;
    box-shadow: 0px 2px 2px rgba(247, 247, 247);
}



.card h2 {
  font-family: sans-serif;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20px; /* Adds space between the heading and content below it */
}


.btn.btn-forgot {
	 background-color: #7c001f;
      color: #fff;
      height: 36px;
      border-radius: 3px;
      border: none;
      font-weight: 700;
    font-size: 14px;
}
.btn.btn-forgot:hover { opacity: 0.8; }

/* Hide the remember me checkbox */
.forgetmenot {
    display: none !important;
}

/* --- Responsive Styles for Mobile --- */
@media screen and (max-width: 480px) {
    /* Reduce padding on the main container */
    #login {
        padding: 20px 10px 0 !important;
        width: 100% !important;
    }

    /* Reduce padding inside the login and forgot password cards */
    #loginform,
    .card-container.card {
        padding: 25px !important;
        box-sizing: border-box;
    }

    /* Adjust logo size on smaller screens */
    #loginform::before {
        height: 60px;
        margin-bottom: 20px;
    }

    /* --- Forgot Password Panel Fixes --- */

    /* Keep "Forgot Password?" title on one line */
    #forgotpanel h2.text-center {
        font-size: 18px; /* Reduced from 20px */
        white-space: nowrap; /* Prevent wrapping */
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    #forgotpanel h3 {
        font-size: 4em; /* Adjust lock icon size if needed */
    }

    /* Remove the inner panel's padding and the fieldset's border/background */
    #forgotpanel .text-center > .panel-body,
    #forgotpanel fieldset {
        padding: 0;
        border: none;
        margin: 0;
    }

    #forgotpanel .input-group {
        width: 100%;
        display: flex;
        margin-top: 15px;
    }

    #forgotpanel #emailInput {
        flex-grow: 1;
        background-color: #fff; /* Explicitly set white background */
        border: 1px solid #ccc;
    }

    /* Ensure the "Send My Password" button text fits on one line */
    .btn.btn-forgot {
        font-size: 14px;
        white-space: nowrap; /* Prevent text from wrapping */
        width: 100%; /* Make button full width */
        box-sizing: border-box; /* Include padding in the width */
        height: 38px; /* Slightly increase height */
        padding: 0 8px; /* Reset padding */
        line-height: 38px; /* Vertically center text */
        margin-top: 15px; /* Add space between input and button */
    }
}