/* Apartment Details selection flow (AC 567) */

/* The theme leaves box-sizing at content-box, so a child with width:100% plus
 * padding overflows its parent — that is what put a horizontal scrollbar in
 * the dropdown panel. Scoped to this widget so the theme is untouched. */
.apartment-details,
.apartment-details *,
.apartment-details *::before,
.apartment-details *::after { box-sizing: border-box; }

.apartment-details {
  display: flex; flex-direction: column; gap: 28px; margin: 18px 0 8px;

  /* Matched to the theme's own form controls, measured on .applicationForm-block select */
  --ad-ink: #000;
  --ad-muted: #555;
  --ad-border: #c9ccc9;
  --ad-border-strong: rgba(0,0,0,.42);
  --ad-size: 14px;

  color: var(--ad-ink);
  font-size: var(--ad-size);
}

.apartment-details .ad-step { display: flex; flex-direction: column; gap: 8px; }
.apartment-details .ad-step > .label { margin: 0; }
.apartment-details .field-instruction { margin: 0; }

.apartment-details .ad-body { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }

/* checkbox / radio rows */
.apartment-details .ad-choice {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin: 0; cursor: pointer; font-weight: 400;
  color: var(--ad-ink); font-size: var(--ad-size);
}
.apartment-details .ad-choice.is-disabled { cursor: not-allowed; opacity: .55; }
.apartment-details .ad-choice input { margin: 0; flex: 0 0 auto; }
.apartment-details .ad-choice-note { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ad-muted); }

/* floor plan cards */
.apartment-details .ad-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.apartment-details .ad-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--ad-border); border-radius: 4px;
  cursor: pointer; margin: 0; font-weight: 400; background: #fff;
  color: var(--ad-ink); font-size: var(--ad-size);
}
.apartment-details .ad-card:hover { border-color: var(--ad-border-strong); }
.apartment-details .ad-card input { margin: 3px 0 0; flex: 0 0 auto; }
.apartment-details .ad-card.is-sold-out { opacity: .5; cursor: not-allowed; }
.apartment-details .ad-card-body { display: flex; flex-direction: column; gap: 2px; }
.apartment-details .ad-card-code { font-size: 16px; font-weight: 700; line-height: 1.2; }
.apartment-details .ad-card-where { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ad-muted); }
.apartment-details .ad-card-price { font-size: 14px; font-weight: 600; margin-top: 2px; }
.apartment-details .ad-card-meta { font-size: 12px; color: var(--ad-muted); }
.apartment-details .ad-card-flag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px;
}

/* ordering */
.apartment-details .ad-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.apartment-details .ad-order-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--ad-border); border-radius: 4px;
}
.apartment-details .ad-order-rank { font-weight: 700; min-width: 18px; }
.apartment-details .ad-order-label { flex: 1 1 auto; }
.apartment-details .ad-order-controls { display: flex; gap: 4px; flex: 0 0 auto; }
.apartment-details .ad-move {
  width: 30px; height: 30px; line-height: 1; padding: 0; cursor: pointer;
  border: 1px solid var(--ad-border); border-radius: 3px; background: transparent;
  font-size: 15px; color: var(--ad-ink);
}
.apartment-details .ad-move:disabled { opacity: .3; cursor: default; }

/* units */
.apartment-details .ad-unit-group { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.apartment-details .ad-unit-head { margin: 0; font-weight: 700; font-size: 14px; }
.apartment-details .ad-unit-list { display: flex; flex-wrap: wrap; gap: 8px 22px; }

@media (max-width: 640px) {
  .apartment-details .ad-cards { grid-template-columns: 1fr; }
  .apartment-details .ad-body { gap: 10px 14px; }
}

/* two questions side by side */
.apartment-details .ad-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px;
}
.apartment-details .ad-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

/* compact multi-select: reads like a select, opens into checkboxes */
.apartment-details .ad-ms { position: relative; width: 100%; max-width: 420px; }

.apartment-details .ad-ms-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 20px; min-height: 52px; background: #fff;
  border: 1px solid var(--ad-border); border-radius: 3px;
  font-family: inherit; font-size: var(--ad-size); line-height: 1.3;
  text-align: left; cursor: pointer; color: var(--ad-ink);
}
.apartment-details .ad-ms-toggle:hover { border-color: var(--ad-border-strong); }
.apartment-details .ad-ms.is-open .ad-ms-toggle { border-color: var(--ad-border-strong); }
.apartment-details .ad-ms-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apartment-details .ad-ms-value.is-empty { color: var(--ad-muted); }
.apartment-details .ad-ms-caret { flex: 0 0 auto; font-size: 12px; color: var(--ad-muted); }
.apartment-details .ad-ms.is-open .ad-ms-caret { transform: rotate(180deg); }

.apartment-details .ad-ms-panel {
  display: none; position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 300px; overflow-y: auto; overflow-x: hidden; padding: 8px;
  background: #fff; border: 1px solid var(--ad-border); border-radius: 3px;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.45);
}
.apartment-details .ad-ms.is-open .ad-ms-panel { display: block; }
.apartment-details .ad-ms-panel .ad-choice {
  display: flex; align-items: flex-start; width: 100%; padding: 6px;
}
/* The row is flex/flex-start so the box lines up with the first line of the
   label, which sits tight against the row above once labels wrap. Nudge the
   box itself rather than the row, so the label keeps its own alignment.
   Overrides the blanket `.ad-choice input { margin: 0 }` above. */
.apartment-details .ad-ms-panel .ad-choice input[type="checkbox"][name="_ad-ms-option"] {
  margin-top: 6px;
}
.apartment-details .ad-ms-panel .ad-choice-label { min-width: 0; overflow-wrap: anywhere; }
.apartment-details .ad-ms-panel .ad-choice:hover { background: rgba(0,0,0,.045); }
.apartment-details .ad-ms-heading {
  margin: 8px 6px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ad-muted);
}
.apartment-details .ad-ms-heading:first-child { margin-top: 2px; }

@media (max-width: 640px) {
  .apartment-details .ad-row { gap: 24px; }
  .apartment-details .ad-ms { max-width: none; }
}

/* The Apartment Details answers sit in required fields that are visually
 * hidden, so CF7 stacks six identical "field is required" tips under the
 * section, none of them beside the step that is missing. Hide those; the
 * widget puts its own message on the offending step instead. */
.wpcf7 .ctf-inquiry .wpcf7-form-control-wrap[data-name^="app-det-"] .wpcf7-not-valid-tip { display: none; }

.apartment-details .ad-error {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #8e3630;
}

/* The Apartment Details answers live in visually hidden required fields. Left
 * loose in the markup, wpautop wrapped them in a paragraph and turned each
 * newline into a <br>, leaving an empty 197px block under the section. Kept in
 * one container so they occupy nothing while still submitting. */
.wpcf7 .ctf-inquiry .ad-fields { line-height: 0; font-size: 0; }