/*
 * The dropdown's own styles, scoped to this one class prefix.
 *
 * Deliberately plain and deliberately not inheriting the theme's list styles:
 * the form lives on a WordPress site whose theme can change under it, and a
 * suggestion list that a theme turns into bullet points is one nobody can read.
 * Two lines per row is the whole design — the agency's name, and its address
 * underneath in smaller, quieter text.
 */

.provey-f27-host {
  position: relative;
}

.provey-f27-list {
  position: absolute;
  box-sizing: border-box;
  z-index: 9999;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 20rem;
  overflow-y: auto;
  margin: 0.15rem 0 0;
  padding: 0;
  background: #fff;
  border: 1px solid #c9ced6;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
  text-align: left;
}

.provey-f27-row {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f5;
  line-height: 1.3;
}

.provey-f27-row:last-child {
  border-bottom: 0;
}

.provey-f27-row.is-active,
.provey-f27-row:hover {
  background: #eef4ff;
}

.provey-f27-name {
  font-weight: 600;
  color: #1b2330;
}

/* The office's address, and the agent's agency — the second line in both lists. */
.provey-f27-meta {
  font-size: 0.85em;
  color: #5b6472;
  margin-top: 0.1rem;
}

/*
 * A row whose record names no live agency. Quieter than a real answer, because
 * it is the absence of one — and the line still has to be there, or two cards
 * for one salesperson read as the same person twice.
 */
.provey-f27-meta.is-empty {
  font-style: italic;
  color: #8a929e;
}

/*
 * The property confirm step: a quiet panel under the address, one radio per
 * property, the lot and plan beneath each. Nothing is pre-selected, and the
 * panel never looks like an error — not finding an address is ordinary.
 */
.provey-f27-confirm {
  /* Below the floated suburb/state/postcode row, never painted behind it. */
  clear: both;
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 0.9rem;
  background: #f7f9fc;
  border: 1px solid #dfe4ea;
  border-radius: 4px;
  text-align: left;
}

.provey-f27-confirm-title {
  font-weight: 600;
  color: #1b2330;
  margin-bottom: 0.4rem;
}

.provey-f27-option {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.35rem 0;
  cursor: pointer;
  line-height: 1.3;
}

.provey-f27-option input[type="radio"] {
  margin-top: 0.2rem;
  flex: none;
}

.provey-f27-confirm-note,
.provey-f27-confirm-source {
  font-size: 0.85em;
  color: #5b6472;
}

.provey-f27-confirm-source {
  margin-top: 0.4rem;
}

/* The line under every list saying it is not the only allowed answer.
   Pinned to the bottom of the list's own scroll, so a long list never hides it. */
.provey-f27-foot {
  position: sticky;
  bottom: 0;
  padding: 0.45rem 0.75rem;
  font-size: 0.85em;
  color: #5b6472;
  border-top: 1px solid #e3e3e3;
  background: #fafafa;
  cursor: default;
}

/* What we have on file for the picked salesperson, masked. */
.provey-f27-onfile {
  margin-top: 0.3rem;
  font-size: 0.85em;
  color: #5b6472;
}

/* "Is this the agency?" under the agency box. */
.provey-f27-offer {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d2d2d2;
  border-radius: 6px;
  background: #fafafa;
}

.provey-f27-offer-q {
  font-weight: 600;
  color: #1b2330;
}

.provey-f27-offer-yes {
  margin-top: 0.45rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid #333;
  border-radius: 999px;
  background: #fff;
  color: #333;
  font: inherit;
  cursor: pointer;
}

.provey-f27-offer-no {
  margin-top: 0.35rem;
  font-size: 0.85em;
  color: #5b6472;
}

/* The whole address — question, suburb row and the choices — in one box, drawn
   only while the choices are showing. `flow-root` contains Formidable's floated
   columns; `.is-grid` is the newer grid layout, carried into the box. */
.provey-f27-address {
  display: flow-root;
  /* Inside the fields' own column, never wider than the section it sits in. */
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
}

.provey-f27-address.is-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  column-gap: inherit;
  row-gap: inherit;
}

.provey-f27-address.is-grid > .provey-f27-confirm {
  grid-column: 1 / -1;
}

.provey-f27-address:has(> .provey-f27-confirm:not([hidden])) {
  padding-top: 0.75rem;
  background: #f7f9fc;
  border-color: #dfe4ea;
}

.provey-f27-address > .provey-f27-confirm {
  margin: 0.25rem 0 0.75rem;
  padding-top: 0;
  padding-bottom: 0;
  background: none;
  border: 0;
}

/* "Not this person" — an option like the rows above it, kept in view at the
   bottom of a long list, and set apart so it never reads as another match. */
.provey-f27-decline {
  position: sticky;
  bottom: 0;
  background: #fafafa;
  border-top: 1px solid #e3e3e3;
  color: #333;
  font-size: 0.9em;
}

.provey-f27-decline.is-active,
.provey-f27-decline:hover {
  background: #eef4ff;
}

/* What to do after "Not this person". */
.provey-f27-declined {
  margin-top: 0.3rem;
  font-size: 0.85em;
  color: #5b6472;
}