/* ==========================================================================
   Owner Listing Services - Concept Showcase pages only (Collective Phase 1, P7.2)

   Loaded by property/view.php on an OLS Concept Showcase and nowhere else, with
   its own version on the link, so a Real Seller Property page loads exactly the
   stylesheet it loaded before Phase 1. Everything here builds on the shared
   ux-spec §10.5 form component in styles.css (.buyer-inquiry-form, .form-field,
   .form-radio) and uses only its tokens; the one new control is the dropdown,
   which follows §6.3 field states exactly like the text inputs.
   ========================================================================== */

/* The Buyer Search Inquiry is 17 questions tall. The shared sidebar is sticky
   on desktop, and a sticky column taller than the screen pins its top and hides
   its submit button until the whole section has scrolled past. Here it scrolls
   with the page, so every question and the button stay reachable. */
.property-page--concept-showcase .property-sidebar {
  position: static;
}

.buyer-search-form__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Three short groups make a long form read as three small ones. */
.buyer-search-form__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
  padding: 16px 0 0;
  min-width: 0;
}

.buyer-search-form__group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.buyer-search-form__group-title {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
}

.buyer-search-form__group-title + * {
  clear: both;
}

/* The dropdown: the same 48px box, border, radius, type and focus ring as
   every text input on the site (ux-spec §6.3), with a drawn arrow so it looks
   the same in every browser. */
.buyer-search-form .form-field select {
  -webkit-appearance: none;
  appearance: none;
  height: 48px;
  width: 100%;
  padding: 0 40px 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-charcoal);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232C2C2C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.buyer-search-form .form-field select:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(58, 191, 191, 0.15);
}

.buyer-search-form .form-field select[aria-invalid="true"],
.buyer-search-form .form-field select.field-invalid {
  border-color: var(--color-error);
}

/* A shorter note box for the optional free-text answers. */
.buyer-search-form .form-field textarea {
  min-height: 96px;
}