/* styles.css */

body {
    background-color: #ffffff; /* Page background remains white */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* Container for the login form */
.container {
    position: relative; /* For positioning the logo */
    background-color: #ffffff; /* White background for the form container */
    border-radius: 8px; /* Rounded corners for the form container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 40px; /* Increased padding to accommodate space for logo */
    width: 100%;
    max-width: 500px; /* Increased maximum width for a larger form */
    color: #000000; /* Black text color for better contrast */
    box-sizing: border-box; /* Ensure padding is included in the width */
}

.logo {
    text-align: center; /* Center logo horizontally */
    margin-bottom: 20px; /* Space between logo and form */
}

.logo img {
    max-width: 100%; /* Ensure logo scales down properly */
    height: auto; /* Maintain aspect ratio */
}

.form-group {
    margin-bottom: 20px; /* Increased space between form fields */
}

.form-group input {
    border: 1px solid #ddd; /* Light border for input fields */
    border-radius: 4px; /* Rounded corners for input fields */
    padding: 12px; /* Increased padding for better input field appearance */
    width: 100%;
}

.form-group input:focus {
    border-color: #910fdd; /* Highlight border color on focus */
    box-shadow: 0 0 0 2px rgba(145, 15, 221, 0.2); /* Subtle shadow for focus effect */
    outline: none; /* Remove default outline */
}

.form-btn {
    text-align: center;
}

.form-btn input {
    background-color: #910fdd; /* Theme color for the submit button */
    border: none;
    color: #ffffff; /* White text color for the button */
    padding: 12px 25px; /* Increased padding for better button appearance */
    border-radius: 4px; /* Rounded corners for the button */
    cursor: pointer; /* Pointer cursor on hover */
}

.form-btn input:hover {
    background-color: #7a0dbb; /* Darker shade for hover effect */
}

.alert {
    margin-top: 20px; /* Increased space for error messages */
    padding: 12px;
    border-radius: 4px;
}

.alert-danger {
    background-color: #f8d7da; /* Light red background for error messages */
    color: #721c24; /* Dark red text color for error messages */
    border: 1px solid #f5c6cb; /* Red border for error messages */
}

/* Style for the registration link */
.registration-link {
    margin-top: 20px; /* Adds space above the registration link */
    text-align: center; /* Centers the link */
}

.registration-link p {
    margin: 0; /* Removes default margin for the paragraph */
}