/* ==========================================================
   Enquire Now – Popup Form
   ========================================================== */
.enq-modal,
.enq-modal *,
.enq-modal *::before,
.enq-modal *::after { box-sizing: border-box; }

.enq-modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* long-hand so older browsers work without `inset` */
  z-index: 99999;
  display: none;
  /* NOTE: with `align-items:center` a dialog taller than the viewport gets its top
     clipped and cannot be scrolled to. Using flex-start plus `margin:auto` on the
     dialog keeps it centred when it fits and fully scrollable when it does not. */
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 20, 38, .72);
  opacity: 0;
  transition: opacity .25s ease;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.enq-modal.is-open { display: flex; }
.enq-modal.is-visible { opacity: 1; }
body.enq-modal-open { overflow: hidden; }
body.enq-modal-open .enq-modal { display: flex; }

.enq-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: auto;          /* centres vertically while the dialog still fits */
  flex: 0 0 auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  transform: translateY(24px);
  transition: transform .28s ease;
  overflow: hidden;
}
.enq-modal.is-visible .enq-modal__dialog { transform: translateY(0); }

.enq-modal__header {
  background: #063464;
  color: #fff;
  padding: 22px 28px;
}
.enq-modal__title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.enq-modal__subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin: 0;
}
.enq-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  line-height: 32px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease;
}
.enq-modal__close:hover { background: rgba(255, 255, 255, .3); }

.enq-modal__body { padding: 26px 28px 30px; }

.enq-form__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.enq-form__col {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 8px;
}
.enq-form__col--full {
  flex: 0 0 100%;
  max-width: 100%;
}
.enq-form__group { margin-bottom: 16px; }

.enq-form input,
.enq-form select,
.enq-form textarea {
  width: 100%;
  height: 48px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #10233b;
  background: #f6f8fa;
  border: 1px solid #dfe5ec;
  border-radius: 6px;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.enq-form textarea {
  height: 100px;
  resize: vertical;
}
.enq-form input:focus,
.enq-form select:focus,
.enq-form textarea:focus {
  border-color: #063464;
  background: #fff;
}
.enq-form input.enq-error,
.enq-form select.enq-error,
.enq-form textarea.enq-error {
  border-color: #d64545;
  background: #fff6f6;
}
.enq-form__msg {
  display: none;
  font-size: 12px;
  color: #d64545;
  margin-top: 5px;
}
.enq-form__group.has-error .enq-form__msg { display: block; }

.enq-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #fff;
  background: #063464;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.enq-form__submit:hover { background: #0a4a8c; }
.enq-form__submit[disabled] { opacity: .65; cursor: not-allowed; }

.enq-form__result { margin-top: 14px; font-size: 14px; }
.enq-form__result .enq-alert {
  padding: 12px 14px;
  border-radius: 6px;
}
.enq-form__result .enq-alert--success {
  color: #12633c;
  background: #e6f6ec;
  border: 1px solid #b8e3c8;
}
.enq-form__result .enq-alert--error {
  color: #8a2020;
  background: #fdecec;
  border: 1px solid #f3c2c2;
}

.enq-modal__note {
  font-size: 12.5px;
  color: #6b7a8d;
  margin: 12px 0 0;
  text-align: center;
}
.enq-modal__note a { color: #063464; font-weight: 600; }

@media (max-width: 575px) {
  .enq-modal__header { padding: 18px 20px; }
  .enq-modal__title { font-size: 19px; }
  .enq-modal__body { padding: 20px; }
  .enq-form__col { flex: 0 0 100%; max-width: 100%; }
}

/* ---- short screens: keep the header (and close button) reachable ---- */
@media (max-height: 700px) {
  .enq-modal { align-items: flex-start; padding: 12px; }
  .enq-modal__header { padding: 16px 24px 14px; }
  .enq-modal__subtitle { display: none; }
  .enq-form textarea { height: 78px; }
  .enq-form__group { margin-bottom: 12px; }
}

/* ==========================================================
   Custom service dropdown - native <select> cannot have a
   scrollable, styled option list, so this replaces it.
   ========================================================== */
.enq-select { position: relative; }

.enq-select__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: #8a97a6;
  background: #f6f8fa;
  border: 1px solid #dfe5ec;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.enq-select.has-value .enq-select__toggle { color: #10233b; }
.enq-select.is-open .enq-select__toggle,
.enq-select__toggle:focus { border-color: #063464; background: #fff; outline: none; }
.enq-form__group.has-error .enq-select__toggle { border-color: #d64545; background: #fff6f6; }

.enq-select__caret {
  width: 9px; height: 9px;
  margin-left: 10px;
  border-right: 2px solid #6b7a8d;
  border-bottom: 2px solid #6b7a8d;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.enq-select.is-open .enq-select__caret { transform: rotate(-135deg) translateY(-2px); }

/* ---- the scrollable list ---- */
.enq-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(6, 52, 100, .18);
  max-height: 208px;          /* about 5 items, rest scrolls */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: none;
}
.enq-select.is-open .enq-select__list { display: block; }

.enq-select__list li {
  padding: 10px 12px;
  font-size: 14px;
  color: #16283d;
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.enq-select__list li:hover { background: #eef3fa; color: #063464; }
.enq-select__list li.is-selected { background: #063464; color: #fff; font-weight: 600; }

/* brand-coloured scrollbar */
.enq-select__list::-webkit-scrollbar { width: 8px; }
.enq-select__list::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; }
.enq-select__list::-webkit-scrollbar-thumb { background: #b9c6d6; border-radius: 8px; }
.enq-select__list::-webkit-scrollbar-thumb:hover { background: #063464; }
.enq-select__list { scrollbar-width: thin; scrollbar-color: #b9c6d6 #f1f5f9; }

@media (max-height: 700px) {
  .enq-select__list { max-height: 168px; }
}