/* Login page - Enhanced Styling
--------------------------*/
/* Importing Google Fonts for a modern look */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
@import "font-awesome.css"; /* Ensure FontAwesome is correctly linked in your HTML */

body {
  background-color: #f0f2f5; /* Light gray background for a softer feel */
  font-family: 'Roboto', sans-serif; /* Modern and readable font for general text */
  display: flex; /* Use flexbox for easy centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  min-height: 100vh; /* Ensure body takes full viewport height */
  margin: 0;
  overflow: hidden; /* Hide overflow if any, keeps it clean */
}

.box-holder {
  -webkit-border-radius: 12px; /* Slightly less rounded than original, still soft */
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;
  position: relative; /* Changed from absolute for flexbox centering */
  display: block;
  /* Removed margin-top and margin-left as flexbox handles centering */
  /* top and left removed as well */
  width: 400px; /* Slightly adjusted width for better proportions */
  height: auto;
  background: #ffffff; /* Clean white background for the form box */
  text-align: center;
  padding: 40px 30px; /* Increased padding for more breathing room */
  color: #333333; /* Soft dark gray for text */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Pronounced, yet subtle, shadow for depth */
  border: 1px solid #e0e0e0; /* Subtle border for definition */
}

/* Enhancing input fields */
input[type="text"],
input[type="password"],
input[type="email"] { /* Target specific input types for consistency */
  background-color: #f8f9fa; /* Very light gray background for input fields */
  border: 1px solid #ced4da; /* Soft border color */
  border-radius: 8px; /* Rounded corners for inputs */
  padding: 12px 15px; /* Comfortable padding */
  width: calc(100% - 30px); /* Adjust width to account for padding */
  margin-bottom: 15px; /* Spacing between inputs */
  color: #495057; /* Darker text color for input values */
  font-size: 16px;
  transition: all 0.3s ease; /* Smooth transition for focus effect */
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  border-color: #5e89b8; /* Primary blue border on focus */
  background-color: #ffffff; /* White background on focus */
  outline: none; /* Remove default outline */
  box-shadow: 0 0 0 0.2rem rgba(94, 137, 184, 0.25); /* Subtle blue glow on focus */
}

/* Placeholder styling */
input::placeholder {
  color: #888; /* Softer placeholder text */
  font-style: italic; /* Italicize placeholders */
}

/* Button styling */
.btn { /* General button class for consistency */
    display: inline-block;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px; /* Consistent rounded corners */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for buttons */
}

.btn-default { /* Specific styling for btn-default */
  background-color: #5e89b8; /* Primary blue background for default button */
  color: #ffffff; /* White text for contrast */
  border: 1px solid #5e89b8;
}

.btn-default:hover {
  background-color: #4e739c; /* Darker blue on hover */
  border-color: #4e739c;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
  transform: translateY(-1px); /* Slight lift on hover */
}

.btn-default:active {
  background-color: #3f5e7f; /* Even darker on active */
  border-color: #3f5e7f;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Smaller shadow on click */
  transform: translateY(0); /* Return to original position */
}


.input-group {
  padding: 0px 10px; /* Keep original padding, consider adjusting if needed */
  margin-bottom: 15px; /* Add margin for spacing if inputs are inside input-group */
}

.input-group .form-control {
    margin-bottom: 0; /* Remove extra margin if form-control is inside input-group */
}

/* You might want to add a heading for the login form */
.box-holder h2 {
    font-family: 'Montserrat', sans-serif;
    color: #2e3b4a;
    margin-bottom: 25px;
    font-size: 28px;
    font-weight: 700;
}