/*
 * Customize your Trip page (template/web/form.html) - page specific styles.
 * The logo image was inserted at its full size and covered the whole form.
 */

/* logo at the top of the form: small, centred, never wider than the form */
#inquiryForm .form-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 220px);
  max-height: 80px;
  object-fit: contain;
  margin: 0 auto 1rem;
}

/* keep the heading close to the logo and give the form some room under the fixed header */
#inquiryForm h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  margin-bottom: 2rem !important;
}

@media (max-width: 767px) {
  #inquiryForm .form-logo {
    max-width: min(100%, 170px);
    max-height: 64px;
  }

  #inquiryForm h2 {
    margin-bottom: 1.5rem !important;
  }
}

/* phones: the columns of the form stack - keep a gap between a field and the label below it */
@media (max-width: 767px) {
  #inquiryForm .form-row > .form-group.mb-0 {
    margin-bottom: 1rem !important;
  }
}

/* "choose at least one" message of a checkbox group: its own line under the whole group */
#inquiryForm .checkbox-group-error {
  display: block;
  margin-top: 0.4rem;
}