/* /public/css/login.css */

/* 1. General Styles */

/* Custom Font Family */
.roboto-regular {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

/* Logo and Heading Styles */
.logo-image {
  width: 100px;
  height: auto;
}

.text-center h1 {
  color: #343a40; /* Dark color for better visibility */
  font-weight: bold;
}

/* Card Styling */
.card {
  border: none;
  border-radius: 10px;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 500;
}

/* Form Labels */
.form-label {
  font-weight: 500;
}

/* 2. Input Fields */

/* General Input Field Styling */
.form-control {
  border-radius: 5px;
  box-shadow: none;
}

.form-control:focus {
  border-color: #0d6efd; /* Bootstrap primary color */
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Password Toggle Icon */
.input-group-text {
  cursor: pointer;
  background-color: transparent;
  border-left: none;
}

.input-group-text i {
  color: #6c757d;
  transition: transform 0.3s ease, color 0.3s ease;
}

.input-group-text:hover i {
  transform: scale(1.2);
  color: #0d6efd; /* Change icon color on hover */
}


/* 4. Error Message Styles */
.error-message,
.error {
  color: red;
  text-align: center;
  margin-bottom: 10px;
}

/* 5. Submit Button */
.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

/* Full-Width Button Replacement for .btn-block */
.btn-block,
.btn-block.d-block.w-100 {
  display: block;
  width: 100%;
}

/* 6. Responsive Adjustments */
@media (max-width: 767.98px) {
  .logo-image {
    width: 80px;
  }

  .card {
    margin-top: 20px;
  }

  .btn-primary {
    font-size: 1rem;
    padding: 0.5rem;
  }

  /* Adjust Password Strength Bar */
  #strength-bar {
    height: 8px;
  }

  #strength-text {
    font-size: 12px;
  }

  /* Adjust Input Group Icons */
  .input-group-text i {
    font-size: 16px;
  }

  /* Adjust Error Messages */
  .error-message,
  .error {
    font-size: 12px;
  }
}

/* 7. Additional Custom Styles */

/* Align 'Forgot Password' and 'Register/Login' Links */
.text-end a,
.text-center a {
  text-decoration: none;
  color: #0d6efd;
  font-weight: 500;
}

.text-end a:hover,
.text-center a:hover {
  text-decoration: underline;
}

/* Password Toggle Focus Outline Removal */
#togglePassword:focus,
#toggleConfirmPassword:focus {
  outline: none;
}

/* Password Requirements Text */
#password-requirements {
  font-size: 0.9rem;
  margin-top: 5px;
}

/* Hide Elements Utility */
.hidden {
  display: none;
}

/* Password Strength Bar Positioning (if applicable) */
.input-group .progress {
  position: relative;
  top: 10px;
}

/* 8. Bootstrap v4 Class Adjustments for Register.ejs */

/* Form Group Styling (.form-group from Bootstrap v4) */
.form-group {
  margin-bottom: 1rem;
}

/* Input Group Append Styling (.input-group-append from Bootstrap v4) */
.input-group-append {
  display: flex;
}

/* Adjust Input Group Append to Bootstrap v5's Input Group Text */
.input-group-append .input-group-text {
  border-left: none;
}

/* Ensure .btn-block behaves correctly by overriding Bootstrap v4 */
.btn-block {
  display: block;
  width: 100%;
}