/* REN styles — V29.5 */

:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin: 0; background: #f6f7f9; color: #111; }

/* FIX: .topbar was used on every page but never defined */
.topbar {
  background: #fff;
  padding: 8px 14px;
  border-bottom: 1px solid #e6e6e6;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* FIX: .wrap was used on every page but never defined */
.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 14px;
}

/* FIX: .compare-tray was used on browse/property/zone/price pages but never defined */
.compare-tray {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e6e6e6;
  padding: 10px 14px;
  z-index: 10;
}

header { background: #fff; padding: 12px 14px; border-bottom: 1px solid #e6e6e6; position: sticky; top: 0; z-index: 10; }
h1 { font-size: 18px; margin: 0; }
.container { padding: 12px 14px; max-width: 980px; margin: 0 auto; }
.card { background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; padding: 12px; margin: 10px 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
input, select, button { font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid #d9d9d9; }
button { background: #111; color: #fff; border: none; cursor: pointer; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.secondary { background: #fff; color: #111; border: 1px solid #d9d9d9; }
button.danger { background: #c0392b; color: #fff; border: none; }
small { color: #666; }
.badge { display:inline-block; padding: 4px 8px; border-radius: 999px; border: 1px solid #ddd; font-size: 12px; background: #fafafa; }
.badge.buyer  { background:#e8f4fd; border-color:#aed6f1; color:#1a5276; }
.badge.seller { background:#eafaf1; border-color:#a9dfbf; color:#1e8449; }
.badge.agent  { background:#fdf2e9; border-color:#f0b27a; color:#784212; }

/* Compact header navigation buttons */
.topbar button, .topbar a button {
  font-size: 13px;
  padding: 6px 10px;
}

/* Role selector buttons on sign up */
button.role-selected { background: #111; color: #fff; border-color: #111; }

/* Watchlist button */
button.watchlisted { background: #fff; color: #c0392b; border: 1px solid #c0392b; }

/* Dashboard */
.dashboard-section { margin-top: 28px; }
.dashboard-section-header { background: #f4f7fb; border: 1px solid #d0d7de; border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px; }
hr { border: none; border-top: 1px solid #eee; margin: 12px 0; }
a { color: #0b57d0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* compare.html uses .tray and .chips (older page, kept for compatibility) */
.tray { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e6e6e6; padding: 10px 14px; }
.chips { display:flex; gap:8px; flex-wrap: wrap; }
.chip { border: 1px solid #ddd; border-radius: 999px; padding: 6px 10px; background:#fafafa; display:flex; gap:8px; align-items:center; }
.chip button { padding: 4px 8px; font-size: 14px; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background:#fff; border:1px solid #e6e6e6; border-radius: 12px; overflow:hidden; }
th, td { padding: 10px; border-bottom: 1px solid #eee; vertical-align: top; }
th { position: sticky; top: 0; background: #fff; z-index: 5; }
thead th { border-bottom: 1px solid #e6e6e6; }
.sort { cursor:pointer; user-select:none; }