/* Travel Interest Form - extracted from TravelInterestForm.js */
/* TODO: delete with TravelInterestForm.js once the HubSpot embed is permanent
   (see hubspot-estimate-form.css). Still used while the progen.hubspot.switch
   site setting is off. */
.travel-estimate .radio input[type='radio'],
.checkbox input[type='checkbox'] {
  float: left;
  margin-left: -20px;
  display: none;
}
.travel-estimate .checkbox + label:before {
  margin-right: 10px;
}
.travel-estimate .checkbox.checkbox,
.radio.radio {
  height: 100%;
  line-height: 0;
  opacity: 1 !important;
  overflow: hidden;
  position: unset;
  width: 100%;
}
#estimateFormCon .form-submit {
  width: 100%;
  padding: 10px;
  font-family: 'ui-sans';
}
.disclaimer-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
}
#edit-type--2 {
  width: 100%;
  max-width: unset;
}
@media only screen and (max-width: 768px) {
  #estimateFormConMobile input[type='text'],
  #estimateFormConMobile input[type='email'],
  #estimateFormConMobile textarea {
    width: 100%;
    max-width: 100%;
  }
}
.error-message {
  color: red;
  font-size: 12px;
}

/* Header presentation moved out of inline styles.
   Mirrors progen-content/src/common/travel-interest-form.js (travelFormBody):
   the subtitle is teal + semibold, the two pricing lines are semibold. */
.conHeader .textdesc.form-subtitle {
  color: #18789a;
  font-weight: 600;
}
.conHeader .textdesc.form-pricing {
  font-weight: 600;
}
.travel-estimate .trip-info-section {
  background-color: rgba(229, 240, 241, 1);
  padding: 27px 0px;
}
.travel-estimate .trip-info-title {
  text-align: center;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 20px;
}
.travel-estimate .form-submit {
  max-width: 80%;
}
.travel-estimate .contact-section {
  margin-top: 0px;
}
.travel-estimate .contact-row {
  margin-top: 0px;
}
.travel-estimate .estimateContact {
  margin-top: 0px;
}
.travel-estimate .estimateContact p {
  font-size: 13px;
}

/* Phone country-code selector (intl-tel-input).
   The widget wraps the phone input in a `.iti` div of its own, and
   css/common/vendor/intlTelInput.min.css declares that wrapper
   `display: inline-block` with no width. An inline-block shrink-wraps, so the
   `width: 100%` on the input resolves against a shrink-to-fit parent and the
   phone field renders narrower than every other field in the form. Stretching
   the wrapper restores the shared full-width column. */
.travel-estimate .form-item-phone .iti {
  width: 100%;
}

/* Non-colour focus indicators for the country dropdown, carried over from
   progen-content/src/common/travel-interest-form.js (a11y QUAL-1930): colour
   alone must not be the only cue for the highlighted country or the focused
   flag toggle. */
.travel-estimate .iti__country.iti__highlight,
.travel-estimate .iti__country[aria-selected='true'] {
  outline: 2px solid #11397a;
  outline-offset: -2px;
  text-decoration: underline;
}
.travel-estimate .iti__selected-flag:focus,
.travel-estimate .iti__selected-flag:focus-visible {
  outline: 2px solid #11397a;
  outline-offset: 2px;
}