/*Start Login Page Style*/
html {
    box-sizing: border-box;
    height: 100%;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body.login-page-new {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh; /* Changed from height to min-height */
    overflow-x: hidden;
    background-color: #fff; /* Fallback if right pane doesn't cover */
}

.login-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Left Pane */
.left-pane {
    flex: 0 0 55%;
    background: linear-gradient(160deg, #c62828, #e53935);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 50px 10%;
    position: relative;
    overflow: hidden;
}

.left-pane::before, .left-pane::after, .left-pane .circle-accent {
    content: '';
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    z-index: 0;
    pointer-events: none;
}

.left-pane::before { /* Large bottom-left circle */
    width: clamp(300px, 40vw, 600px);
    height: clamp(300px, 40vw, 600px);
    bottom: -20%; 
    left: -20%;
    opacity: 0.8;
}

.left-pane::after { /* Smaller top-right, less prominent or adjusted */
    width: clamp(150px, 20vw, 300px);
    height: clamp(150px, 20vw, 300px);
    top: 5%;
    right: -10%;
    opacity: 0.5;
}
.left-pane .circle-accent { /* Mid-left circle */
    width: clamp(250px, 30vw, 500px);
    height: clamp(250px, 30vw, 500px);
    top: 20%;
    left: 5%;
    opacity: 0.7;
}


.welcome-content {
    max-width: 480px;
    z-index: 1;
    position: relative;
}

.welcome-content h2 { /* WELCOME */
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.welcome-content h3 { /* YOUR HEADLINE NAME */
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 500;
    margin-bottom: 25px;
    line-height: 1.3;
}

.welcome-content p {
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.7;
    font-weight: 300;
    opacity: 0.9;
}

/* Right Pane */
.right-pane {
    flex: 0 0 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background-color: #e7e7e75c; 
}

.login-form-container {
    background-color: white;
    padding: clamp(30px, 5vw, 50px) clamp(25px, 4vw, 40px);
    border-radius: 20px;
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 420px;
}

.login-form-container h2 { /* Sign in */
    font-size: clamp(28px, 4vw, 34px);
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
    text-align: left;
}

.login-form-container p.subtitle {
    font-size: clamp(13px, 1.8vw, 15px);
    color: #6c757d;
    margin-bottom: 30px;
    text-align: left;
    font-weight: 400;
}

.login-form-container .form-group {
    margin-bottom: 22px;
}

.login-form-container .form-control {
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 14px 18px;
    font-size: 15px;
    height: auto; 
    line-height: 1.5;
    width: 100%; 
    background-color: #f7f9fc; /* Slightly off-white background for inputs */
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.login-form-container .form-control::placeholder {
    color: #999;
}
.login-form-container .form-control:focus {
    border-color: #c62828;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.15);
}

.login-form-container .password-group {
    position: relative;
}

.login-form-container .show-password {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    color: #c62828;
    cursor: pointer;
    user-select: none;
    background: transparent;
    padding: 5px;
}

.login-form-container .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-size: 13px;
}

.login-form-container .remember-me {
    display: flex;
    align-items: center;
}
.login-form-container .remember-me input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: #c62828;
    border: 1px solid #ccc;
    vertical-align: middle;
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}
.login-form-container .remember-me label {
    margin-bottom: 0;
    color: #555;
    font-weight: 500;
    font-size: 13px;
    vertical-align: middle;
    cursor: pointer;
}

.login-form-container .forgot-password {
    color: #c62828;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}
.login-form-container .forgot-password:hover {
    text-decoration: underline;
}

.login-form-container .btn-signin {
    background-image: linear-gradient(to right, #e53935, #a02020);
    border: none;
    color: white;
    padding: 14px 15px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    width: 100%;
    transition: opacity 0.2s ease;
    text-transform: none; 
    letter-spacing: 0.5px;
}
.login-form-container .btn-signin:hover {
    opacity: 0.9;
}

.login-form-container .signup-link {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
    color: #666;
}
.login-form-container .signup-link a {
    color: #c62828;
    font-weight: 600;
    text-decoration: none;
}
.login-form-container .signup-link a:hover {
    text-decoration: underline;
}

/* Alert styling (Bootstrap classes provide base) */
.alert {
    margin-bottom: 20px;
    border-radius: 8px;
}

/* --- Styles specific to Forgot Password form content --- */

/*
  Assuming .login-form-container is the main white box for the form,
  and its basic padding, border-radius, and shadow are defined
  in the common CSS (from the login page).
  Also, assuming .form-control, general h2, p.subtitle styles are common.
*/

/* Styling for the "Submit" button on the Forgot Password page.
   This class (.btn-submit) would be used on your submit button.
   It matches the gradient style of the "Sign in" button from the image. */
.login-form-container .btn-submit {
    background-image: linear-gradient(to right, #e53935, #a02020);
    border: none;
    color: white;
    padding: 14px 15px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    width: 100%;
    transition: opacity 0.2s ease;
    text-transform: none; /* Explicitly set if needed */
    letter-spacing: 0.5px; /* Optional: for slight text spacing */
    cursor: pointer;
}

.login-form-container .btn-submit:hover {
    opacity: 0.9;
}

/* Styling for the "Back to Login" link section.
   This class (.back-link) would be used on the container div for this link. */
.login-form-container .back-link {
    text-align: center;
    margin-top: 30px; /* Adjust as needed for spacing */
    font-size: 14px;
    color: #666; /* For text like "Back to " */
}

.login-form-container .back-link a {
    color: #c62828; /* Standard link blue */
    font-weight: 600;
    text-decoration: none;
}

.login-form-container .back-link a:hover {
    text-decoration: underline;
}

/* Optional: If form groups on the simpler Forgot Password page
   need slightly different spacing than on the Login page. */
.login-form-container .form-group {
    margin-bottom: 25px; /* Example: if login page used 22px, this is an adjustment */
}

/*
  Note: Styles for .login-form-container h2 (e.g., "Forgot Password" title)
  and .login-form-container p.subtitle (e.g., "Enter your username...")
  are assumed to be consistent with the login page's styling for these elements
  and are therefore not repeated here as "extra" CSS. The same applies to
  .form-control for the input field.
  The alert styling is also assumed to be common via Bootstrap.
*/

/* --- Styles specific to Create Account (Register) form content --- */

/*
  Assuming .login-form-container, .form-control, general h2, p.subtitle,
  and the main button's visual style (gradient, padding, etc.)
  are defined in the common CSS from the login page.
*/

/* Styling for the "Submit" button on the Register page.
   The class .btn-register is used. Its base appearance is the same as login's .btn-signin.
   The primary "extra" part here is the :disabled state. */
.login-form-container .btn-register:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Styling for the "Already have an account?" link section.
   This class (.login-link) would be used on the container div for this link.
   Visually similar to the login page's "Sign up" link. */
.login-form-container .login-link {
    text-align: center;
    margin-top: 25px; /* Adjust if different from login page's similar link */
    font-size: 14px;
    color: #666;
}

.login-form-container .login-link a {
    color: #c62828;
    font-weight: 600;
    text-decoration: none;
}

.login-form-container .login-link a:hover {
    text-decoration: underline;
}

/* Password match message styling */
#cs_msg {
    display: block; /* Ensures it takes full width if needed */
    width: 100%;    /* Aligns with the input field above */
    text-align: right; /* As per original design image's implication */
    font-size: 0.85em; /* Smaller than main text */
    margin-top: 5px;   /* Space between input and message */
    height: 1.2em;     /* Reserve space to prevent layout shift when text appears */
    line-height: 1.2em;
}

#cs_msg.matched { /* Class added by JS when passwords match */
    color: green;
}

#cs_msg.not-matched { /* Class added by JS when passwords don't match */
    color: red;
}

/* Optional: If form groups on the register page
   need slightly different spacing than on the Login page due to more fields. */
.login-form-container .form-group {
    margin-bottom: 20px; /* Example: if login page used 22px, this is a slight adjustment */
}

/* Refined Alert styling (if these are specific overrides/additions for this page
   and not already in a global/common stylesheet used by the login page) */
.alert {
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 0.9rem; /* Slightly smaller alert text */
    padding: 0.8rem 1rem; /* Custom padding */
}

.alert strong {
    font-weight: 600; /* Ensure strong tag is bold */
}

/*
  Note:
  - The main submit button class `.btn-register` would have its primary visual styles
    (background gradient, padding, font-size, border-radius) defined to be the
    same as the `.btn-signin` on the login page. The only "extra" here is the
    `:disabled` state. If you named it `.btn-submit` like the forgot password page,
    then that class would just be reused.
  - Styles for `.login-form-container h2` (e.g., "Create Account" title)
    and `.login-form-container p.subtitle` are assumed to be consistent.
*/

/* Responsive adjustments */
@media (max-width: 991.98px) { /* Tablet */
    .login-wrapper {
        flex-direction: column;
    }
    .left-pane {
        flex: 0 0 auto; 
        min-height: 30vh; /* Adjust height for tablets */
        padding: 40px 5%;
        align-items: center;
        text-align: center;
    }
     .left-pane::before { bottom: -30%; left: -30%; width: clamp(250px, 35vw, 500px); height: clamp(250px, 35vw, 500px);}
     .left-pane::after { display: none; } /* Hide one circle if too cluttered */
     .left-pane .circle-accent { top: 10%; left: -10%; width: clamp(200px, 25vw, 400px); height: clamp(200px, 25vw, 400px); }


    .right-pane {
        flex: 1; /* Allow right pane to take up remaining vertical space */
        padding: 30px 20px;
        align-items: flex-start; /* Align form to top on mobile stacks */
        padding-top: 50px; /* Add some top padding */
    }
    .login-form-container {
        margin: 0 auto; 
        box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.06);
        max-width: 450px;
    }
}

@media (max-width: 575.98px) { /* Small mobile */
    .left-pane {
        min-height: auto; /* Let content define height or set small fixed height */
        padding: 30px 15px 20px; /* Less bottom padding */
    }
    .left-pane::before, .left-pane::after, .left-pane .circle-accent {
         display: none; 
    }
    .welcome-content h2 { font-size: 28px; margin-bottom: 10px; }
    .welcome-content h3 { font-size: 18px; margin-bottom: 15px; }
    .welcome-content p { display: none; }


    .right-pane {
        padding: 20px 15px; /* Further reduce padding */
        align-items: flex-start; /* Ensure form stays at top */
        padding-top: 30px;
    }
    .login-form-container {
        padding: 25px 20px;
        border-radius: 15px;
        box-shadow: none; /* Often better without shadow on small screens */
        width: 100%;
        max-width: none; /* Allow full width within padding */
    }
    .login-form-container h2 { font-size: 24px; }
    .login-form-container p.subtitle { font-size: 12px; margin-bottom: 20px; }
    
    .login-form-container .form-control { padding: 12px 15px; font-size: 14px; }
    .login-form-container .show-password { right: 15px; font-size: 12px; }

    .login-form-container .form-options {
        flex-direction: column;
        align-items: flex-start;
        font-size: 12px;
    }
    .login-form-container .remember-me label,
    .login-form-container .forgot-password { font-size: 12px; }

    .login-form-container .form-options .forgot-password {
        margin-top: 12px;
    }
    .login-form-container .btn-signin { padding: 12px 15px; font-size: 15px; }
    .login-form-container .signup-link { font-size: 13px; margin-top: 20px;}
}