/* Custom Styles for Login Page */

/* Reset some default Bootstrap styles */
body {
    background-color: rgb(235, 253, 251);
    font-family: Arial, sans-serif;
}

.login-container {
    max-width: 480px; /* Increased width from 450px to 480px */
    margin: 80px auto; /* Adjusted top margin to increase form height */
}

.login-card {
    border: 1px solid rgba(255, 255, 255, 0.5); /* Lightened border color */
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced box shadow for modern touch */
    background: rgba(255, 255, 255, 0.8); /* Added slight transparency */
    backdrop-filter: blur(5px); /* Optional: Adds blur effect for modern look */
}

.login-card .card-title {
    font-weight: 600;
    color: #343a40;
}

.login-card .btn-primary {
    background-color: #007bff;
    border: none;
    padding: 0.75rem 1.25rem; /* Increased padding for larger button */
    font-size: 1.1rem; /* Slightly increased font size */
}

.login-card .btn-primary:hover {
    background-color: #0056b3;
}

.login-card .form-control {
    background-color: transparent; /* Made input fields transparent */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Light border for visibility */
    height: calc(1.5em + 1.25rem + 2px); /* Increased height for larger input fields */
    font-size: 1.05rem; /* Slightly increased font size */
}

.login-card .form-control:focus {
    box-shadow: none;
    border-color: #007bff;
    background-color: rgba(255, 255, 255, 0.1); /* Slight background on focus for usability */
}

.login-card .register-link,
.login-card .text-center span {
    color: #007bff;
    font-size: 1rem; /* Increased font size for better readability */
}

.login-card .register-link:hover {
    text-decoration: underline;
}

.login-card .alert {
    border-radius: 4px;
}

.login-card label {
    font-weight: 500;
    color: #495057;
    display: block;
    margin-bottom: 0.5rem;
}

.login-card i {
    margin-right: 8px;
    color: #6c757d;
}

.login-card .form-group {
    margin-bottom: 1.75em; /* Increased spacing between form groups */
}

.btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1.25rem;
}

@media (max-width: 576px) {
    .login-container {
        margin: 50px auto;
        padding: 0 15px;
    }

    .login-card {
        padding: 20px;
    }
}