body {
      background: #f5f7fb;
      font-family: "Inter", sans-serif;
    }

    .auth-wrapper {
      display: flex;
      min-height: 100vh;
    }

    .auth-left {
      flex: 1;
      background-size: cover;
      background-position: center;
      background-image: url('../images/signup-bg.jpg'); /* Replace dynamically if needed */
    }

    .auth-right {
      flex: 1;
      background: #fff;
      border-radius: 0 20px 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
      padding: 40px;
      position: relative;
      overflow: hidden;
    }

    .auth-form {
      max-width: 360px;
      width: 100%;
      text-align: center;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .auth-form img {
      height: auto;
      width: 100px;
      margin-bottom: 20px;
    }

    .auth-form h3 {
      font-weight: 700;
      margin-bottom: 20px;
    }

    .form-control {
      border-radius: 50px;
      padding: 10px 15px;
      font-size: 0.95rem;
    }

    

    .btn-primary {
      background-color: #001f3f;
      border: none;
      border-radius: 50px;
      padding: 10px 0;
    }

    .btn-primary:hover {
      background-color: #002b5e;
    }

    .or-divider {
      position: relative;
      text-align: center;
      margin: 40px 0;
    }

    .or-divider::before,
    .or-divider::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 45%;
      height: 1px;
      background: #ddd;
    }

    .or-divider::before { left: 0; }
    .or-divider::after { right: 0; }

    .social-btn {
  border-radius: 50px;
  border: 1px solid #ddd;
  padding: 10px 0;
  font-weight: 500;
  color: #333;
  display: flex;                  
  align-items: center;            
  justify-content: center;        
  gap: 8px;                       
}

.social-btn img {
  height: 20px;
  width: 20px;                    
  margin: 0;                      
  display: inline-block;
}


    a {
      color: var(--blue);
      font-weight: 500;
      text-decoration: none;
    }

    .password-field {
  position: relative;
}

.password-field i {
  position: absolute;
  top: 70%;
  right: 16px;
  transform: translateY(-50%); 
  cursor: pointer;
  color: #6c757d;
  font-size: 18px;
}

    .auth-form.hidden {
      opacity: 0;
      transform: translateX(20px);
      pointer-events: none;
      position: absolute;
    }

    ::placeholder {
  color: #bec6d2 !important;  /* light gray-blue tone */
  opacity: 1; /* make sure it’s fully visible */
  font-size: 14px;
}

    @media (max-width: 768px) {
      .auth-wrapper {
        flex-direction: column;
      }
      .auth-left {
        display: none;
      }
      .auth-right {
        border-radius: 0;
        height: 100vh;
      }
    }

    .auth-form label {
  color: #2f3c48 !important; 
  font-weight: 500;
  font-size: 14px;
}

/* Red focus styling for invalid/empty required fields */
.form-control.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  outline: none;
}

/* Ensure red border is visible even when not focused */
.form-control.is-invalid:not(:focus) {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}