/* Validation Error Messages */
.error-message {
  color: #ff4444;
  font-size: 0.85rem;
  margin-top: -8px;
  margin-bottom: 8px;
  text-align: left;
  padding-left: 5px;
  display: none;
}

/* Name Input Layout */
.name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.name-row input {
  margin: 12px 0;
}

#signupMiddleName {
  width: 100%;
  margin: 12px 0;
}

/* Form Validation States */
input:invalid:not(:placeholder-shown) {
  border-color: #ff4444;
}

input:valid:not(:placeholder-shown) {
  border-color: #4CAF50;
}

input:focus {
  outline: none;
  border-color: #f4c542;
  box-shadow: 0 0 8px rgba(244, 196, 66, 0.3);
}

/* Error state styling */
input.error {
  border-color: #ff4444 !important;
  background-color: rgba(255, 68, 68, 0.05);
}

/* Success state styling */
input.success {
  border-color: #4CAF50 !important;
  background-color: rgba(76, 175, 80, 0.05);
}

/* Password field with eye icon */
.password-container {
  position: relative;
  width: 100%;
}

.password-container input {
  width: 100%;
  padding-right: 40px; /* space for the eye */
  margin: 12px 0;
}

.toggle-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  transition: color 0.2s ease;
}

.toggle-eye:hover {
  color: #f4c542;
}

.toggle-eye i {
  font-size: 1rem;
}

.toggle-eye.active i {
  color: #f4c542;
}