/* The enquiry form, and the popup that holds one.
 *
 * The only stylesheet here that is not the live site's. It is built from the
 * live site's own tokens so the form reads as part of the page: Raleway,
 * 14px body, #666 text, #015b92 for labels, #21b6c6 for the submit button,
 * the same 3px radius and 0.3em/1em padding Divi gives every other button.
 */

.wr-enquiry-slot {
  margin-top: 10px;
}

.wr-enquiry-slot--contact .et_pb_row {
  padding-bottom: 4%;
}

.wr-enquiry {
  font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  line-height: 1.7em;
  color: #666;
  max-width: 640px;
  text-align: left;
}

.wr-enquiry__row {
  margin-bottom: 14px;
}

.wr-enquiry__pair {
  display: flex;
  gap: 16px;
}

.wr-enquiry__pair > .wr-enquiry__row {
  flex: 1 1 0;
  min-width: 0;
}

.wr-enquiry label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: #015b92;
}

.wr-enquiry label span {
  color: #21b6c6;
}

.wr-enquiry input[type='text'],
.wr-enquiry input[type='email'],
.wr-enquiry input[type='tel'],
.wr-enquiry select,
.wr-enquiry textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #2c2c2c;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
}

.wr-enquiry select {
  /* A caret, since appearance: none removes the native one. */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="%23666"><path d="M1.5 4l4.5 4.5L10.5 4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px;
}

.wr-enquiry textarea {
  resize: vertical;
}

.wr-enquiry input:focus,
.wr-enquiry select:focus,
.wr-enquiry textarea:focus {
  outline: none;
  border-color: #21b6c6;
  box-shadow: 0 0 0 2px rgba(33, 182, 198, 0.2);
}

.wr-enquiry [aria-invalid='true'] {
  border-color: #c0392b;
}

.wr-enquiry__hint {
  margin: -8px 0 14px;
  font-size: 13px;
  color: #888;
  padding-bottom: 0;
}

.wr-enquiry__error {
  display: none;
  margin-top: 4px;
  font-size: 13px;
  color: #c0392b;
}

.wr-enquiry__error:not(:empty) {
  display: block;
}

.wr-enquiry__form-error {
  margin-bottom: 14px;
  padding: 0;
  font-size: 14px;
  color: #c0392b;
}

.wr-enquiry__form-error:empty {
  display: none;
}

.wr-enquiry__form-error:not(:empty) {
  padding: 10px 14px;
  background: #fdeceb;
  border-left: 3px solid #c0392b;
}

.wr-enquiry__submit {
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7em;
  color: #fff;
  background-color: #21b6c6;
  border: 2px solid #21b6c6;
  border-radius: 3px;
  padding: 0.3em 1em;
  cursor: pointer;
  transition: background-color 300ms ease, border-color 300ms ease;
}

.wr-enquiry__submit:hover {
  background-color: #46af9e;
  border-color: #46af9e;
}

.wr-enquiry__submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

.wr-enquiry__note {
  margin-top: 12px;
  font-size: 13px;
  color: #888;
  padding-bottom: 0;
}

/* Hidden from people, offered to bots. Not display:none, which some bots skip. */
.wr-enquiry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wr-enquiry__done {
  padding: 16px 18px;
  background: #f6f6f6;
  border-left: 3px solid #21b6c6;
}

.wr-enquiry__done h4 {
  color: #015b92;
  font-size: 18px;
  padding-bottom: 6px;
}

.wr-enquiry__done p {
  padding-bottom: 0;
}

.wr-enquiry--compact .wr-enquiry__submit {
  font-size: 16px;
}

.wr-enquiry--compact .wr-enquiry__note {
  display: none;
}

@media only screen and (max-width: 600px) {
  .wr-enquiry__pair {
    display: block;
  }
}

/* --------------------------------------------- the Request Appointment popup */

.pum-overlay {
  position: fixed;
  inset: 0;
  z-index: 1999999999;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

.pum-overlay[hidden] {
  display: none;
}

.pum-container {
  position: relative;
  width: 640px;
  max-width: calc(100% - 60px);
  margin: 100px auto 3em;
  padding: 18px;
  background-color: #fff;
  border: 8px solid #000;
  border-radius: 3px;
  box-shadow: 0 0 30px 0 rgba(2, 2, 2, 1);
}

.pum-content h5 {
  color: #000;
  font-size: 20px;
  line-height: 26px;
  padding-bottom: 14px;
}

.pum-close {
  position: absolute;
  top: -24px;
  right: -24px;
  height: 30px;
  width: 30px;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: 24px;
  line-height: 26px;
  border: 2px solid #fff;
  border-radius: 30px;
  box-shadow: 0 0 15px 1px rgba(2, 2, 2, 0.75);
  background-color: #000;
  cursor: pointer;
}