/*
 * Member accounts: sign-up, sign-in and the listing dashboard.
 *
 * Loaded only on those pages rather than appended to site.css, because none of
 * it applies to the 158 public pages. Styled with the theme's own tokens --
 * #004274 headings, #00aeff accents, #28a745 for the primary action -- so the
 * member area reads as part of the site rather than a bolted-on portal.
 */

/* ------------------------------------------------------- account screens */
.account-wrap { padding: 40px 0 60px; }

.account-card {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e4e8ed;
  border-radius: 6px;
  padding: 32px;
}
.account-card-wide { max-width: 720px; }
.account-title { font-size: 26px; color: #004274; margin: 0 0 8px; }
.account-lead { color: #66707a; margin: 0 0 24px; }
.account-alt { margin: 18px 0 0; text-align: center; color: #66707a; }

.account-roles { border: 0; padding: 0; margin: 0 0 24px; }
.account-roles legend {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #66707a;
  margin-bottom: 10px;
}
.role-option {
  display: block;
  border: 1px solid #e4e8ed;
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  font-weight: 400;
}
.role-option.is-selected { border-color: #00aeff; background: #f3fbff; }
.role-option input { margin-right: 8px; }
.role-name { font-weight: 700; color: #004274; }
.role-hint { display: block; margin: 4px 0 0 24px; font-size: 13px; color: #8a9099; }

/* ------------------------------------------------------ shared form bits */
.form-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.form-row > .form-group { flex: 1 1 220px; }
.form-row-3 > .form-group { flex: 1 1 150px; }

.dash-form label,
.account-card label,
.field-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #26292e;
  margin-bottom: 5px;
}
.field-hint { display: block; font-size: 13px; color: #8a9099; margin-top: 4px; }
.field-error { display: block; font-size: 13px; color: #c0392b; margin-top: 4px; }

/* --------------------------------------------------------------- dashboard */
.dashboard-wrap { padding: 30px 0 60px; }

.dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e4e8ed;
  margin-bottom: 24px;
}
.dash-title { font-size: 24px; color: #004274; margin: 0; }
.dash-sub { margin: 2px 0 0; color: #8a9099; font-size: 14px; }
.dash-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.dash-nav-link { color: #66707a; font-weight: 500; }
.dash-nav-link.is-current { color: #004274; border-bottom: 2px solid #00aeff; }
.dash-nav-button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.dash-logout { margin: 0; }

.dash-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff8e6;
  border: 1px solid #f2ddab;
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.dash-notice p { margin: 0; color: #6b5510; }
.dash-notice form { margin: 0; }

.dash-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.dash-filter {
  border: 1px solid #e4e8ed;
  border-radius: 30px;
  padding: 6px 16px;
  color: #66707a;
  font-size: 14px;
}
.dash-filter.is-current { border-color: #00aeff; color: #004274; background: #f3fbff; }
.dash-filter-n { color: #8a9099; }

.dash-empty {
  text-align: center;
  padding: 50px 20px;
  border: 1px dashed #d6dce3;
  border-radius: 6px;
}
.dash-empty h2 { font-size: 20px; color: #004274; }
.dash-empty p { color: #66707a; }

.dash-listing {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid #e4e8ed;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
  background: #fff;
}
.dash-listing-thumb { flex: 0 0 110px; }
.dash-listing-thumb img { border-radius: 4px; width: 110px; height: 82px; object-fit: cover; }
.dash-listing-nophoto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 82px;
  background: #f2f4f7;
  border-radius: 4px;
  color: #a5adb6;
  font-size: 12px;
}
.dash-listing-body { flex: 1 1 auto; min-width: 0; }
.dash-listing-title { font-size: 17px; margin: 6px 0 4px; }
.dash-listing-meta { margin: 0; color: #66707a; font-size: 14px; }
.dash-listing-hint { margin: 6px 0 0; font-size: 13px; color: #8a9099; }
.dash-review-note {
  margin: 8px 0 0;
  font-size: 13px;
  background: #fdecea;
  border-left: 3px solid #e07a70;
  padding: 8px 10px;
  color: #97231a;
}
.dash-listing-actions { display: flex; flex-direction: column; gap: 6px; }
.dash-listing-actions form { margin: 0; }

.dash-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 3px;
  padding: 3px 8px;
  color: #fff;
}
.dash-badge.is-live { background: #28a745; }
.dash-badge.is-pending { background: #e0932f; }
.dash-badge.is-rejected { background: #c0392b; }
.dash-badge.is-draft { background: #8a9099; }
.dash-purpose { font-size: 12px; color: #8a9099; margin-left: 8px; text-transform: uppercase; }

.btn-danger { color: #c0392b; border-color: #e2b7b2; }
.btn-danger:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

/* ------------------------------------------------------------ listing form */
.dash-form-head { margin-bottom: 18px; }
.dash-form-head h2 { font-size: 20px; color: #004274; margin: 0; }

.dash-panel {
  background: #fff;
  border: 1px solid #e4e8ed;
  border-radius: 6px;
  padding: 22px;
  margin-bottom: 16px;
}
.dash-panel h3 {
  font-size: 16px;
  color: #004274;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef1f4;
}
/* The sale and rent blocks are both in the DOM; only one is shown. */
.dash-panel[hidden] { display: none; }

.listing-purpose {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.listing-purpose legend {
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #66707a;
  margin-bottom: 8px;
}
.purpose-option {
  border: 1px solid #e4e8ed;
  border-radius: 30px;
  padding: 8px 20px;
  cursor: pointer;
  background: #fff;
  margin: 0;
  font-weight: 400;
}
.purpose-option.is-selected {
  border-color: #00aeff;
  background: #f3fbff;
  color: #004274;
  font-weight: 700;
}
.purpose-option input { margin-right: 6px; }

.listing-features { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.listing-feature { font-weight: 400; margin: 0; }
.listing-feature input { margin-right: 6px; }

.listing-cover-current { margin-bottom: 8px; }
.listing-cover-current img { width: 120px; border-radius: 4px; }
.listing-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.listing-gallery-item { width: 110px; margin: 0; font-weight: 400; }
.listing-gallery-item img { width: 110px; height: 82px; object-fit: cover; border-radius: 4px; }
.listing-gallery-remove { display: block; font-size: 12px; color: #66707a; margin-top: 3px; }

.dash-form-actions { display: flex; gap: 10px; align-items: center; }

@media (max-width: 575.98px) {
  .account-card { padding: 22px; }
  .dash-listing { flex-wrap: wrap; }
  .dash-listing-actions { flex-direction: row; width: 100%; }
  .dash-header { flex-direction: column; align-items: flex-start; }
}