/* Enquiry form. Scoped to #enq so guide and partner fields keep the 56px underline. */

#enq-slot { min-width: 0; max-width: 100%; }

#enq {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 40px;
  row-gap: 8px;
  max-width: 100%;
  margin: 0;
}

@media (max-width: 1023px) {
  #enq { column-gap: 20px; }
}

#enq .enq-field { min-width: 0; max-width: 100%; }
#enq fieldset.enq-field { border: 0; margin: 0; padding: 0; }
#enq legend.micro { padding: 0; }

#enq .micro { display: block; line-height: 1.15; }

#enq .enq-field > .fld,
#enq .enq-combo { margin-top: 2px; }

#enq .fld {
  height: 44px;
  margin-top: 2px;
  font-size: 15px;
  min-width: 0;
}

#enq .enq-combo .fld { margin-top: 0; padding-right: 44px; }

#enq textarea.fld {
  height: auto;
  min-height: 72px;
  padding: 8px 2px 6px;
  line-height: 1.45;
}

/* Selects match the combo fields: same 15px text, same 2px left offset, same
   12px chevron centred 22px from the right edge. The empty option reads as a
   muted placeholder, like input::placeholder. */
#enq select.fld {
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 44px 0 2px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.2 4.4 6 8l3.8-3.6' fill='none' stroke='%233d433c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
}

#enq select.fld::-ms-expand { display: none; }

#enq select.fld:has(> option[value=""]:checked) { color: #767c72; }

#enq .err { margin-top: 4px; }
#enq .err[hidden] { display: none; }

#enq .enq-actions { margin-top: 4px; }
#enq .enq-actions .btn { height: 44px; margin-top: 0; }
#enq .enq-note { margin-top: 8px; max-width: 42rem; }

#enq .enq-combo { position: relative; min-width: 0; }

#enq .enq-combo-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

#enq .enq-combo-btn svg { width: 12px; height: 12px; display: block; }

#enq .enq-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 4px 8px 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 40px -28px rgba(16, 20, 16, .55);
}

#enq .enq-list[hidden] { display: none !important; }

#enq .enq-group {
  margin: 8px 2px 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
}

#enq .enq-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}

#enq .enq-opt.is-active { background: var(--paper); }
#enq .enq-opt[aria-selected="true"] { color: var(--meadow); }
#enq .enq-opt .enq-tick { flex: none; width: 1em; text-align: center; }

#enq .enq-empty {
  padding: 12px 4px;
  color: var(--ink-3);
  font-size: 14px;
}

#enq .enq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
  max-width: 100%;
}

#enq .enq-chips:empty,
#enq .enq-chips[hidden] { display: none !important; margin: 0; }

#enq .enq-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  padding: 0 2px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

#enq .enq-chip span {
  min-width: 0;
  padding: 4px 0;
  overflow-wrap: break-word;
}

#enq .enq-chip button {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

#enq .enq-chip button:hover { color: var(--ink); }
#enq .enq-chip button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

#enq .enq-ui { display: none; }
.js #enq .enq-ui { display: block; }

.js #enq .enq-fallback {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  #enq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #enq .enq-span { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  #enq { row-gap: 8px; }
  #enq .enq-list { max-height: min(240px, 42vh); }
  #enq .enq-chip { min-height: 44px; font-size: 15px; padding-left: 12px; }
  #enq .enq-chip button { width: 44px; height: 44px; }
}