/* Contact page styles - standard checkbox */

/* Fix newsletter checkbox height issue */
#newsletter {
  height: auto !important;
  padding: 0 !important;
  margin-right: 8px !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
}

/* Add background to newsletter row */
.form-check.newsletter-row {
  padding: 12px 15px !important;
  margin: 1rem 0 1.25rem 0 !important;
  min-height: 24px !important;
  height: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  background-color: #f8f9fa !important;
  border-radius: 8px !important;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  cursor: pointer !important; /* Show pointer cursor to indicate clickability */
  transition: background-color 0.15s ease-in-out !important; /* Smooth hover effect */
}

/* Make sure all child elements also show pointer cursor */
.form-check.newsletter-row *,
.form-check.newsletter-row .form-check-label,
.form-check.newsletter-row::before,
.form-check.newsletter-row::after {
  cursor: pointer !important;
}

/* Hover effect for newsletter row */
.form-check.newsletter-row:hover {
  background-color: #e9ecef !important;
}

/* Standard form-check styling */
.form-check {
  min-height: 24px !important;
  height: auto !important;
  display: flex !important;
  align-items: flex-start !important;
}

.form-check-input {
  height: 16px !important;
  width: 16px !important;
  margin-top: 0.3rem !important;
  border: 1px solid #777 !important;
  border-radius: 3px !important;
  background-color: white !important;
}

/* Position the newsletter checkbox specifically */
.newsletter-row .form-check-input {
  position: static !important;
  margin-right: 12px !important;
  margin-top: 2px !important;
  margin-left: 0 !important;
  flex-shrink: 0 !important;
}

.form-check-label {
  margin-left: 4px !important;
  display: inline !important;
  line-height: 1.5 !important;
}

/* Position the newsletter label specifically */
.newsletter-row .form-check-label {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}