/* ===== Login Page Styling ===== */
.login-container {
    max-width: 400px;
    margin: 80px auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 10px;
}

h2 {
    margin-bottom: 15px;
    color: #333;
}

/* Error Message Styling */
.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Form Elements */
form {
    display: flex;
    flex-direction: column;
}

label {
    text-align: left;
    font-weight: bold;
    margin-top: 10px;
    color: #000; /* Ensures labels are visible */
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    color: #000; /* Ensures text inside input fields is visible */
    background-color: #fff; /* Makes sure inputs are not blending into the background */
}

.success-message {
    color: green;
    font-weight: bold;
    background: #d4edda;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.error-message {
    color: red;
    font-weight: bold;
    background: #f8d7da;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

/* Remember Me checkbox */
.remember-me {
    display: flex;
    align-items: center; /* Ensures vertical alignment */
    gap: 6px; /* Adds spacing between checkbox and label */
    margin: 10px 0;
    color: #000;
}

    /* Ensure checkbox is properly aligned */
    .remember-me input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #000; /* (Optional) Adjust color */
        cursor: pointer; /* Makes it clickable */
        appearance: auto; /* Keeps default checkbox styling */
    }

    /* Label styling */
    .remember-me label {
        font-size: 14px;
        line-height: 1; /* Ensures the text aligns properly */
        cursor: pointer;
    }


/* Button Styling */
button {
    background: #28a745;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    button:hover {
        background: #218838;
    }

/* Extra Links */
.extra-links {
    margin-top: 15px;
    color: #000; /* Ensures links are visible */
}

    .extra-links a {
        color: #007bff;
        text-decoration: none;
        font-weight: bold;
    }

        .extra-links a:hover {
            text-decoration: underline;
        }

/* ===== Register Page Styling ===== */
.register-container {
    max-width: 650px;
    margin: 50px auto;
    padding: 20px;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 10px;
}

h2 {
    margin-bottom: 15px;
    color: #333;
}

/* Error Message Styling */
.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Form Elements */
form {
    color: black;
    font-weight: bold;
    display: flex;
    flex-direction: column;
}

label {
    text-align: left;
    font-weight: bold;
    margin-top: 10px;
    color: #000;
}

input, select {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    color: #000;
    background-color: #fff;
}

/* ===== Register Page Styling ===== */
.forgot-container {
    max-width: 650px;
    margin: 50px auto;
    padding: 20px;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 10px;
}

h2 {
    margin-bottom: 15px;
    color: #333;
}

/* Error Message Styling */
.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Form Elements */
form {
    color: black;
    font-weight: bold;
    display: flex;
    flex-direction: column;
}

label {
    text-align: left;
    font-weight: bold;
    margin-top: 10px;
    color: #000;
}

input, select {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    color: #000;
    background-color: #fff;
}

/* Checkbox Styling */
.checkbox-container {
    display: flex;
    align-items: flex-start; /* Aligns text and checkbox at the top */
    gap: 6px; /* Adds spacing between checkbox and text */
    font-size: 14px;
    margin: 10px 0;
}

    /* Ensure checkboxes stay aligned */
    .checkbox-container input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 3px; /* Adjusts alignment with text */
        cursor: pointer;
    }

    /* Ensures labels wrap correctly */
    .checkbox-container label {
        display: flex;
        flex-direction: column;
        line-height: 1.2; /* Prevents excessive spacing */
        cursor: pointer;
    }

/* Button Styling */
button {
    background: #28a745;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    button:hover {
        background: #218838;
    }

/* Links */
p a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

    p a:hover {
        text-decoration: underline;
    }