/**
 * contact-form.css
 *
 * Contact form stylesheet for the BridgePoints Insight website.
 * Contains styles for form layout, input focus states, validation error
 * indicators, submit button hover effects, and success message display.
 */

/* ============================================
   Form Labels & Layout
   ============================================ */

label {
  display: block;
  color: #555;
  font-weight: 500;
}

#contactForm .form-group {
  display: flex;
  align-items: center;
}

/* ============================================
   Form Input Styles
   ============================================ */

#contactForm input,
#contactForm select,
#contactForm textarea {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus {
  outline: none;
  border-color: #0087de;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ============================================
   Validation Error States
   ============================================ */

.error label {
  color: red;
}

#contactForm .error input,
#contactForm .error select,
#contactForm .error textarea {
  border-color: red;
}

.form-group .inputError,
.inputError {
  border-bottom: 1px solid #ff0000;
}

/* ============================================
   Submit Button
   ============================================ */

.submit-btn {
  border: none;
  cursor: pointer;
}

.contact-submit-btn::before {
  content: '';
  width: 100%;
  height: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #10122b;
  transition: height 0.3s linear;
  z-index: -1;
}

.contact-submit-btn:hover::before {
  height: 100%;
}

/* ============================================
   Success Message
   ============================================ */

.success-message {
  color: #28a745;
  margin-top: 1rem;
  display: none;
}