body {
  background-color: #f7f8fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.login-box {
  background-color: #fff;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

h4 {
  font-weight: 600;
  margin-bottom: 25px;
  color: #333;
}

.form-control {
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 15px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease-in-out;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.2);
}

.btn-primary {
  background-color: #006aff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056d2;
}

.text-center small {
  display: block;
  margin-top: 20px;
}

a {
  color: #006aff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* --- Input Group (Password/Confirm Password) Styling --- */

/* 1. Container Alignment Fix: Ensures the input group width matches single inputs. */
.input-group.mb-3 {
    /* Apply consistent margin to align with single inputs (assuming 8px margin on others) */
    margin: 8px !important;
    /* Calculate width to account for the margin (100% of container - 8px left - 8px right) */
    width: calc(100% - 16px); 
}

/* 2. Input Field inside the Group */
.input-group .form-control {
    /* Remove any vertical margin that might interfere */
    margin: 0; 
    /* Set the left side to be fully rounded and the right side flat to meet the button */
    border-radius: 8px 0 0 8px; 
}

/* 3. Eye Toggle Button Styling */
.input-group .btn-outline-secondary {
    /* Set the left side flat and the right side rounded to match the input's corners */
    border-radius: 0 8px 8px 0;
    /* Ensure the border color matches the input field's border */
    border-color: #ccc;
    /* Remove the border between the input and the button for a single-unit appearance */
    border-left: none; 
    /* Ensure the button background is white */
    background-color: #fff; 
    /* Apply standard button padding for consistent height */
    padding: 10px 15px; 
    /* Ensure no focus outline disrupts the look (Bootstrap handles this, but good to check) */
    box-shadow: none;
}

/* Optional: Icon style on hover/focus (makes the icon blue when interacted with) */
.input-group .btn-outline-secondary:hover i,
.input-group .btn-outline-secondary:focus i {
    color: #006aff;
}