:root {
  --bg: #f4f5f9;
  --card-bg: #ffffff;
  --text-dark: #1f2937;
  --text-muted: #6b7280;
  --accent: #2563EB;
  --available: #2f855a;
  --kiv: #dd9d18;
  --booked: #c0392b;
  --sold: #374151;
  --border: #e5e7eb;
  --telegram: #229ed9;
}

* { box-sizing: border-box; }

/* Global form control baseline — without this, any <input>/<select>/
   <textarea> outside a scoped container (like .form-box) falls back to
   the browser's raw default appearance (no radius, inconsistent padding,
   default system font) which is where most of the "dated" look across
   admin pages came from. Scoped containers with their own more specific
   rules (.form-box, .filter-bar, etc.) still win via normal CSS specificity,
   this only fills in the gaps everywhere else. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"],
input[type="date"], input[type="datetime-local"], input[type="search"],
select, textarea {
  padding: 9px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-dark, #1f2937);
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent, #2563EB);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
label { font-family: inherit; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  overflow-x: hidden;
}

@media (max-width: 640px) {
  /* Site-wide (admin forms, main site, brand-site all share this
     stylesheet) — iOS Safari auto-zooms the whole page when an input/
     select/textarea is focused with font-size under 16px. Add Listing and
     other admin forms had no explicit font-size at all (falling back to
     the browser default, ~13px), triggering this on every field. */
  input[type="text"], input[type="number"], input[type="email"],
  input[type="tel"], input[type="password"], input[type="date"],
  input[type="search"], input[type="url"], select, textarea {
    font-size: 16px;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

h1.site-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 20px 0 24px;
}

.filter-bar {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.filter-bar label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-right: 4px;
}

.filter-bar select, .filter-bar input[type="text"] {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 0.9rem;
  color: var(--text-dark);
}

.filter-bar button {
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
}

.filter-bar button:hover { filter: brightness(0.95); }

/* ---------- Grouped filter fields (label stays attached to its own control) ---------- */
.filter-bar-grouped {
  align-items: flex-end;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}
.filter-field label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
  font-weight: 600;
}
.filter-field select, .filter-field input {
  width: 100%;
}
.filter-field-btn { min-width: auto; }
.filter-field-btn button { width: 100%; white-space: nowrap; }
@media (max-width: 640px) {
  .filter-bar-grouped { gap: 12px; }
  .filter-field { flex: 1 1 calc(50% - 6px); min-width: calc(50% - 6px); }
  .filter-field:first-child { flex: 1 1 100%; min-width: 100%; }
  .filter-field-btn { flex: 1 1 100%; min-width: 100%; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  max-width: 100%;
}
/* Brand-site homepage listing grid — force a consistent 4-per-row instead
   of auto-fill, which produced inconsistent card widths/column counts
   depending on exact container width. */
@media (min-width: 900px) {
  #bsHomeListingsGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 340px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--card-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: #dfe3ea;
}

.agent-photo-card img {
  aspect-ratio: 1 / 1;
  height: auto;
  object-position: top center;
}
.agent-photo-card { position: relative; }
.agent-save-btn { position: absolute; top: 8px; right: 8px; z-index: 5; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #374151; }
.agent-save-btn svg { width: 16px; height: 16px; }
.agent-save-btn.saved { color: #2563EB; }

.agents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) {
  .agents-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .agents-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .agents-grid { grid-template-columns: 1fr; }
}

/* ---------- Listing form step-tracker sidebar (add_listing.php + edit_listing.php) ---------- */
.listing-form-layout { display: flex; gap: 24px; align-items: flex-start; }
.listing-form-layout .form-box { flex: 1; min-width: 0; }
.listing-toc { display: none; }
@media (min-width: 1024px) {
  /* Right-side step tracker, desktop only — on mobile the form is
     already a single manageable scroll, and a sticky sidebar would
     just eat screen space without room to show the form comfortably. */
  .listing-toc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 14px;
  }
  .listing-toc a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  .listing-toc a:hover { background: #f9fafb; }
  .listing-toc a.active { background: #eff6ff; color: var(--accent, #2563EB); }
  .listing-toc-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800;
  }
  .listing-toc a.active .listing-toc-num { background: var(--accent, #2563EB); color: #fff; }
}

/* ---------- Extra photos drag-to-reorder uploader (add_listing.php + edit_listing.php) ---------- */
.extra-photos-reorder-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.extra-photo-item { position: relative; width: 90px; height: 90px; border-radius: 8px; overflow: hidden; cursor: grab; border: 2px solid var(--border, #e5e7eb); background: #f3f4f6; }
.extra-photo-item.dragging { opacity: 0.4; }
.extra-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.extra-photo-order { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.extra-photo-remove { position: absolute; top: 4px; right: 4px; background: rgba(220,38,38,0.9); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; line-height: 1; cursor: pointer; font-size: 0.9rem; }

/* ---------- Agent directory hero ---------- */
.agents-hero {
  background: linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%);
  border-radius: 18px;
  padding: 40px 32px;
  color: #fff;
  margin: 24px 0 28px;
  position: relative;
  overflow: hidden;
}
.agents-hero::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.agents-hero h2 { margin: 0 0 10px; font-size: 1.9rem; display: flex; align-items: center; gap: 12px; }
.agents-hero p { margin: 0; opacity: 0.92; font-size: 1rem; max-width: 640px; line-height: 1.6; }
.agents-hero-stat { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 16px; background: rgba(255,255,255,0.16); padding: 7px 16px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; }
.agents-hero-stat strong { font-size: 1.25rem; }

/* ---------- Agent directory controls (search/sort/filter) ---------- */
.agent-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
/* Shared search-with-icon style used identically across Telegram Channel
   Directory, WTB List, and Agent Directory — same look everywhere instead
   of each page inventing its own slightly-different variant. */
.tgcp-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.tgcp-search { flex: 1; min-width: 220px; position: relative; }
.tgcp-search input { width: 100%; box-sizing: border-box; padding: 12px 16px 12px 40px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; }
.tgcp-search::before { content: '\1F50D'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; opacity: 0.5; }
.agent-sort-select {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.9rem;
  background: #fff;
}
.agent-state-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto;
  padding-bottom: 4px;
}
.state-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.state-pill.active {
  background: #1e293b;
  color: #fff;
  border-color: #1e293b;
}

/* ---------- Mobile: compact list-row layout for agent cards ---------- */
@media (max-width: 640px) {
  .agents-grid { grid-template-columns: 1fr; gap: 10px; }
  .agent-photo-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    padding: 34px 12px 10px !important;
    gap: 12px;
  }
  .agent-photo-card > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }
  .agent-photo-card img {
    width: 52px !important;
    height: 52px !important;
    aspect-ratio: 1/1 !important;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .agent-row-info {
    padding: 0 !important;
    gap: 1px !important;
    min-width: 0;
  }
  .agent-row-info .card-title { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; }
  .agent-row-info .card-state { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .agent-row-phone { display: block; }
  .agent-row-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 92px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    gap: 0 !important;
    border: none !important;
  }
  .agent-row-badge {
    display: block !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f0fdf4 !important;
    color: var(--available) !important;
    font-weight: 700 !important;
    font-size: 0.68rem !important;
    padding: 6px 4px !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }
  .agent-row-tg {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    background: linear-gradient(135deg, #34b7eb 0%, var(--telegram) 100%) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    padding: 6px 4px !important;
    line-height: 1.3 !important;
  }
}
@media (min-width: 641px) {
  .agent-row-actions { display: flex; margin-top: auto; }
  .agent-row-badge { flex: 1; text-align: center; padding: 11px 6px; font-weight: 700; font-size: 0.85rem; color: var(--available); background: #f0fdf4; }
  .agent-row-tg { flex: 1; text-align: center; text-decoration: none; padding: 11px 6px; font-weight: 700; font-size: 0.85rem; color: #fff; background: linear-gradient(135deg, #34b7eb 0%, var(--telegram) 100%); display: flex; align-items: center; justify-content: center; }
}

.card-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-title { font-weight: 700; font-size: 1.05rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-state { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 4px; }

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.price { color: var(--text-dark); font-weight: 700; font-size: 1rem; }
.old-price { display: block; color: #9ca3af; font-weight: 400; font-size: 0.72rem; text-decoration: line-through; margin: 0 0 1px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.badge.AVAILABLE { background: var(--available); }
.badge.KIV { background: var(--kiv); }
.badge.DRAFT { background: #6b7280; }
.badge.BOOKED { background: var(--booked); }
.badge.SOLD { background: var(--sold); }
.badge.EXPIRED { background: #9ca3af; }

.tg-btn {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  text-align: center;
  background: linear-gradient(135deg, #34b7eb 0%, var(--telegram) 100%);
  color: #fff;
  text-decoration: none;
  padding: 11px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 3px 10px rgba(34, 158, 217, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(34, 158, 217, 0.4);
  filter: brightness(1.03);
}
.tg-btn:active { transform: translateY(0); }

.coa-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
}

/* ---------- Admin ---------- */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 9px;
  border: none;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, background-color 0.12s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn:active { transform: translateY(0); filter: brightness(0.98); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,0.35); }
.btn-primary:hover { box-shadow: 0 4px 10px rgba(37,99,235,0.4); }
.btn-danger { background: var(--booked); box-shadow: 0 2px 6px rgba(192,57,43,0.3); }
.btn-danger:hover { box-shadow: 0 4px 10px rgba(192,57,43,0.35); }
.btn-muted { background: #9ca3af; }
.btn-outline { background: #fff; color: var(--text-dark); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.btn-outline:hover { border-color: #d1d5db; background: #fafafa; }

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.bulk-bar select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.bulk-bar .btn { padding: 6px 14px; font-size: 0.85rem; }

table.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
table.admin-table th, table.admin-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.88rem;
  vertical-align: top;
}
/* Every "Actions" cell across admin tables (listings, WTB, ads, agents,
   etc.) tends to hold a mix of <a class="btn">, <form style="display:inline">
   and the occasional plain <span> status note — left to wrap as plain
   inline content, these bunch up unevenly (different heights, no
   consistent gap) the moment a row has more than 2-3 actions. A flex
   wrap with a fixed gap keeps every row's buttons in a tidy, even grid
   regardless of how many actions that particular row has. */
table.admin-table td[data-label="Actions"] {
  white-space: nowrap;
}
table.admin-table td[data-label="Actions"] form { margin: 0; }
table.admin-table th {
  background: #fafbfc;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
table.admin-table tbody tr { transition: background-color 0.1s ease; }
table.admin-table tbody tr:hover { background: #fafbfc; }
table.admin-table tbody tr:last-child td { border-bottom: none; }

.status-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.8rem;
}

.login-box {
  max-width: 360px;
  margin: 80px auto;
  background: #fff;
  padding: 32px;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.login-box h2 { text-align: center; margin-top: 0; }
.login-box input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
}
.login-box button { width: 100%; }

.form-box {
  background: #fff;
  padding: 24px;
  border-radius: 14px;
  max-width: 560px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.admin-two-col .form-box { max-width: 100%; }
.form-box label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 12px 0 4px;
  color: var(--text-muted);
}
.form-box input, .form-box select, .form-box textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
}

.alert {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.alert-error { background: #fde8e8; color: #c0392b; }
.alert-success { background: #e6f4ea; color: #2f855a; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 30px;
}
.pagination a, .pagination span, .pagination button {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-dark);
  font-size: 0.9rem;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
}
.pagination .active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

@media (max-width: 640px) {
  .pagination a, .pagination span, .pagination button { padding: 7px 11px; font-size: 0.82rem; }
}

@media (max-width: 640px) {
  .admin-header { flex-direction: column; align-items: flex-start; }
}

/* ---------- Top nav (single row) ---------- */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

@media (max-width: 1024px) {
  /* While a full-screen filter panel (Location/Property Type/Filter) is
     open, hide the site header entirely instead of trying to out-stack it
     with z-index — a hidden element can never visually overlap anything,
     sidestepping the whole class of stacking-context bugs that approach
     kept running into. */
  body.lf-panel-active .topbar,
  body.lf-panel-active .announcement-marquee {
    display: none;
  }
}

/* ---------- Announcement marquee (sits right under the header) ---------- */
.announcement-marquee {
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0;
}
.announcement-marquee-track {
  display: inline-block;
  animation: announcement-marquee-scroll 32s linear infinite;
}
.announcement-marquee-item {
  display: inline-block;
  padding: 0 48px;
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 600;
}
@keyframes announcement-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Agents on slow connections / who prefer less motion shouldn't be forced
   to watch a constantly-scrolling banner — show it static instead. */
@media (prefers-reduced-motion: reduce) {
  .announcement-marquee-track {
    animation: none;
    padding-left: 0;
    white-space: normal;
  }
}
.topbar-row {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}
.topbar-brand {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-dark);
  text-decoration: none;
  flex-shrink: 0;
  display: inline-block;
  line-height: 1.3;
}
.topbar-brand-credit { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-muted); }
.main-nav {
  display: flex;
  gap: 18px;
  flex-wrap: nowrap;
}
.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding-bottom: 4px;
}
.nav-link.active, .nav-link:hover {
  color: #2563EB;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.btn-sm { padding: 7px 16px; font-size: 0.85rem; }
.topbar-login-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #374151;
  padding: 10px 8px;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-login-link:hover { color: #2563EB; }
.topbar-login-link-mobile { display: none; }

.hamburger-btn { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-dark); padding: 4px 8px; }

/* ---------- Centralized listing filter (Filter Lanjut) ---------- */
.listing-filter-form { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 20px; }
.listing-filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.listing-filter-input {
  flex: 2; min-width: 180px; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px;
  box-sizing: border-box; font-size: 16px; font-family: inherit;
}
.listing-filter-toggle-btn {
  background: #f3f4f6; border: 1px solid #d1d5db; padding: 12px 18px; border-radius: 8px;
  font-weight: 700; font-size: 16px; color: #374151; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.listing-filter-submit-btn {
  background: #1c1930; color: #fff; border: none; padding: 12px 28px; border-radius: 8px;
  font-weight: 700; font-size: 16px; cursor: pointer; font-family: inherit;
}
.listing-filter-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f3f4f6; }
.listing-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.listing-filter-grid label { font-size: 0.78rem; font-weight: 700; color: #374151; display: block; margin-bottom: 4px; }
.listing-filter-grid select {
  width: 100%; padding: 9px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 16px; font-family: inherit; box-sizing: border-box;
}
.listing-filter-clear { margin-top: 12px; }
.listing-filter-clear a { color: #2563EB; font-weight: 700; font-size: 0.85rem; text-decoration: none; }
@media (max-width: 640px) {
  .listing-filter-input { flex: none !important; width: 100%; }
  .listing-filter-toggle-btn, .listing-filter-submit-btn { flex: 1; }
}
.mobile-nav { display: none; flex-direction: column; background: #fff; border-top: 1px solid var(--border); padding: 8px 20px 14px; }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 10px 4px; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid #f3f4f6; text-decoration: none; }
.mobile-nav a.active { color: var(--text-dark); }
.mobile-nav-bell { display: flex; align-items: center; gap: 8px; }
.mobile-nav-badge {
  background: var(--booked);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.3;
}
.mobile-nav-group { border-bottom: 1px solid #f3f4f6; }
.mobile-nav-group summary { padding: 10px 4px; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); cursor: pointer; list-style: none; }
.mobile-nav-group summary::-webkit-details-marker { display: none; }
.mobile-nav-group summary::after { content: '\25BE'; float: right; }
.mobile-nav-group[open] summary::after { content: '\25B4'; }
.mobile-nav-group a { display: block; padding: 10px 4px 10px 16px; border-bottom: none; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.mobile-nav-group a.active { color: var(--text-dark); }

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .hamburger-btn { display: block; }
  .topbar-user-info { display: none; }
  .topbar-actions-desktop { display: none; }
  .topbar-login-link-mobile {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #374151;
    text-decoration: none;
    white-space: nowrap;
  }
}
.btn-outline.btn-sm { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; }

.bell {
  position: relative;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--text-muted);
  padding: 4px;
}
.admin-topbar-lang { position: relative; }
.admin-topbar-lang-summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: #374151;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: nowrap;
}
.admin-topbar-lang-summary::-webkit-details-marker { display: none; }
.admin-topbar-lang[open] .admin-topbar-lang-summary { border-color: var(--accent); color: var(--accent); }
.admin-topbar-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  border: 1px solid var(--border);
}
.admin-topbar-lang-option {
  display: block;
  padding: 9px 16px;
  color: #374151;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  background: #fff;
}
.admin-topbar-lang-option:hover { background: #f3f4f6; }
.admin-topbar-lang-option.active { color: var(--accent); }
.bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--booked);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
  line-height: 1.3;
}
.topbar-user-wrap { position: relative; display: inline-flex; }
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.topbar-user img, .topbar-user-fallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}
.topbar-user-fallback {
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.topbar-user-info { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-user-name { font-weight: 700; font-size: 0.85rem; color: var(--text-dark); }
.topbar-user-role { font-size: 0.72rem; color: var(--text-muted); }

.topbar-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  min-width: 160px;
  overflow: hidden;
  z-index: 50;
}
.topbar-user-menu.open { display: block; }
.topbar-user-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
}
.topbar-user-menu a:hover { background: #f9fafb; }
.topbar-user-menu a + a { border-top: 1px solid #f3f4f6; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, #eef1f6 0%, #dde3ec 100%);
  padding: 40px 20px 90px;
}
.hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  background-size: cover;
  background-position: 65% 20%;
  mask-image: linear-gradient(to right, transparent, black 25%);
  -webkit-mask-image: linear-gradient(to right, transparent, black 25%);
  opacity: 0.35;
}
@media (max-width: 640px) {
  .hero-bg {
    width: 100%;
    background-position: 63% 15%;
    mask-image: linear-gradient(to bottom, black 55%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
    opacity: 0.3;
  }
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.hero h1 {
  font-size: 2rem;
  font-weight: 400;
  color: #1e293b;
  margin: 10px 0 2px;
}
.hero h1 strong {
  display: block;
  font-weight: 800;
  font-size: 2.1rem;
}
.hero p {
  color: #475569;
  margin: 6px 0 26px;
}
.hero-search {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  max-width: 1150px;
}
.hero-search input[type="text"], .hero-search input[type="number"], .hero-search select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.88rem;
}
.hero-search input[type="text"] { flex: 3 1 240px; }
.hero-search select, .hero-search input[type="number"] { flex: 1 1 90px; }
.hero-search button {
  background: #1e293b;
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* ---------- Stats row ---------- */
.stats-row {
  max-width: 1200px;
  margin: -55px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .stats-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stats-row { grid-template-columns: 1fr; } }
.stats-row > * { min-width: 0; }
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex;
  gap: 12px;
  align-items: center;
}
.stat-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  color: #fff;
}
.stat-icon.blue { background: #6366f1; }
.stat-icon.green { background: #16a34a; }
.stat-icon.orange { background: #f97316; }
.stat-number { font-size: 1.3rem; font-weight: 800; color: var(--text-dark); line-height: 1.1; }
.stat-label { font-size: 0.78rem; color: var(--text-muted); }
.stat-delta { font-size: 0.72rem; color: #16a34a; font-weight: 700; margin-top: 2px; }
.cta-card {
  background: #1e293b;
  color: #fff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.cta-card strong { font-size: 0.95rem; }
.cta-card p { font-size: 0.78rem; color: #cbd5e1; margin: 0 0 4px; }
.cta-card-actions { display: flex; gap: 8px; }
.cta-card .btn { padding: 6px 12px; font-size: 0.78rem; }

/* ---------- Home content grid ---------- */
.home-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
}
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }

.home-grid-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .home-grid-3col { grid-template-columns: 1fr; } }
.home-grid > div { min-width: 0; overflow-x: hidden; }

/* ---------- WTB simple list (no cards/images, just rows) ---------- */
.wtb-simple-list { display: flex; flex-direction: column; }
.wtb-simple-row {
  padding: 14px 4px;
  border-bottom: 1px solid #eef0f3;
  font-size: 0.85rem;
}
.wtb-simple-row:last-child { border-bottom: none; }
.wtb-simple-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.wtb-simple-budget { font-weight: 700; color: #12101A; font-size: 0.95rem; }
.wtb-simple-time { color: #9ca3af; font-size: 0.75rem; }
.wtb-simple-area { color: #374151; margin-bottom: 2px; }
.wtb-simple-type { color: #6b7280; font-size: 0.8rem; margin-bottom: 8px; }
.wtb-simple-row-bottom { display: flex; justify-content: space-between; align-items: center; }
.wtb-simple-status { color: #6b7280; font-size: 0.8rem; }
.wtb-simple-actions { display: flex; gap: 10px; font-size: 1.1rem; }
.wtb-simple-actions a { text-decoration: none; }

.hscroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  max-width: 100%;
}
.hscroll .card { flex: 0 0 250px; }

.listings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .listings-grid { grid-template-columns: repeat(2, 1fr); } }

.card-badges-topleft {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
  align-items: center;
}

.new-badge {
  background: #6366f1;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.coa-mark-btn {
  border: 1.5px solid #dc2626;
  background: #fff;
  color: #dc2626;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
}
.coa-mark-btn:hover { transform: scale(1.05); }
.coa-mark-btn.active {
  background: #dc2626;
  color: #fff;
}
.not-my-listing-badge {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1.5px solid #bfdbfe;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.no-coa-badge {
  background: #f3f4f6;
  color: #6b7280;
  border: 1.5px solid #e5e7eb;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Icon-only circular variant, used on cards without a NEW badge (All Listing / Agent profile) */
.coa-mark-corner {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 1.5px solid #dc2626;
  color: #dc2626;
  font-size: 0.95rem;
  padding: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.coa-mark-corner.active {
  background: #dc2626;
  color: #fff;
}
.card-thumb-wrap { position: relative; }
.photo-count-badge {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
}
.card-view-hint {
  position: absolute;
  bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  pointer-events: none;
  transition: background 0.15s, transform 0.15s;
}
/* Desktop bonus — darken the photo + make the hint pop a little on hover.
   Has no effect on touch devices (no real hover state there), which is why
   the badge itself stays always-visible rather than only appearing on hover. */
.card-thumb-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.15s;
  pointer-events: none;
  z-index: 2;
}
.card-thumb-wrap:hover::after { background: rgba(0,0,0,0.12); }
.card-thumb-wrap:hover .card-view-hint { background: rgba(0,0,0,0.8); transform: scale(1.05); }
.card-thumb-wrap img.card-agent-avatar {
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* WhatsApp contact buttons (wa-contact-btn — see whatsapp_button_html() in
   site_config.php) get a gentle recurring pulse so they don't get lost next
   to the agent name — small + green-on-white was easy to miss entirely. */
@keyframes wa-btn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.wa-contact-btn {
  display: inline-flex;
  animation: wa-btn-pulse 1.6s ease-in-out infinite;
}
/* Pause the animation on hover/focus — a constantly-moving target under the
   cursor feels off; settle it the moment someone's actually about to click. */
.wa-contact-btn:hover, .wa-contact-btn:focus {
  animation-play-state: paused;
  transform: scale(1.18);
}
@media (prefers-reduced-motion: reduce) {
  .wa-contact-btn { animation: none; }
}


/* Icon-only variant for cards in a flex row (not absolute), e.g. Featured Listings sidebar */
.coa-mark-inline {
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
  padding: 0;
  flex-shrink: 0;
  align-self: center;
}
.card-specs { font-size: 0.78rem; color: var(--text-muted); margin: 2px 0; }

.buyer-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  max-width: 100%;
}
.buyer-card {
  flex: 0 0 250px;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.buyer-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.buyer-tag {
  background: #fde8e8; color: #c0392b;
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 9px; border-radius: 6px;
}
.buyer-time { font-size: 0.72rem; color: #9ca3af; }
.buyer-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin: 5px 0; }
.buyer-row .label { color: #9ca3af; }
.buyer-actions { display: flex; gap: 8px; margin-top: 12px; }
.buyer-actions .btn { flex: 1; text-align: center; padding: 8px; font-size: 0.82rem; }

.sidebar-block { margin-bottom: 32px; min-width: 0; }
.sidebar-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.featured-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
}
.featured-card img {
  width: 76px; height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.featured-card .info { font-size: 0.82rem; min-width: 0; }
.featured-card .price { font-size: 0.85rem; }
.featured-badge {
  background: #fef3c7; color: #b45309;
  font-size: 0.62rem; font-weight: 700;
  padding: 2px 6px; border-radius: 5px;
  margin-left: 6px;
}

.agent-rank-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
  max-width: 100%;
}
.agent-rank-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.agent-rank-info { flex: 1; min-width: 0; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
.agent-rank-agency { font-size: 0.72rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-rank-stats { text-align: right; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.agent-rank-stats strong { color: var(--text-dark); font-size: 0.85rem; }
.medal { font-size: 1rem; margin-right: 2px; }
@media (max-width: 400px) {
  .agent-rank-stats { font-size: 0.66rem; }
  .agent-rank-stats strong { font-size: 0.76rem; }
}

.activity-section { max-width: 1200px; margin: 0 auto 50px; padding: 0 20px; }
.activity-row-list { display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
@media (min-width: 901px) {
  /* Web sahaja — 3 kolum (Active Buyer, Top Agent, Latest Activity) dalam
     .home-grid-3col sepatutnya nampak sama tinggi, tapi masing-masing boleh
     jadi panjang berbeza ikut jumlah data. Fixed height + scroll dalam
     senarai ni sendiri, bukan pada seluruh kolum, supaya heading/button
     "View All" di atas tetap kekal di tempat asal. Mobile tak disentuh. */
  .activity-row-list, .wtb-simple-list, .sidebar-list { max-height: 520px; overflow-y: auto; padding-right: 4px; }
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.activity-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #dfe3ea; }
.activity-info { font-size: 0.8rem; min-width: 0; }
.activity-info strong { display: block; font-size: 0.82rem; }
.activity-time { font-size: 0.68rem; color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 20px 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.site-footer a { color: var(--telegram); font-weight: 600; text-decoration: none; }
.footer-mobile-break { display: none; }
@media (max-width: 640px) {
  .footer-mobile-break { display: inline; }
}

/* ---------- Agent profile meta line ---------- */
.agent-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 24px;
}
.agent-meta .item:not(:first-child)::before {
  content: "-";
  margin-right: 6px;
  color: #cbd5e1;
}
.agent-meta a { color: var(--telegram); text-decoration: none; font-weight: 600; }
@media (max-width: 640px) {
  .agent-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .agent-meta .item:not(:first-child)::before { content: none; }
}

/* ---------- Left-aligned page variant (agent profile page) ---------- */
/* Matches the nav bar's max-width (1200px) so this content's left edge lines up with the logo, instead of hugging the browser edge or floating centered with the old 1100px width. */
.container-left {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 20px;
}
@media (max-width: 640px) {
  .container-left {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- Search bar ---------- */
.search-bar {
  display: flex;
  gap: 8px;
  max-width: 500px;
  margin: 0 auto 28px;
}
.search-bar input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
}
.search-bar button {
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

/* ---------- Listing age note ---------- */
.listing-age {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.listing-age-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.listing-agent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.listing-agent-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- WTB compact rows (one per line, no image) ---------- */
.wtb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wtb-row {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1.6fr 1.3fr 1.3fr 100px 1.1fr 250px;
  align-items: center;
  gap: 10px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.wtb-title { font-weight: 700; }
.wtb-meta { color: var(--text-muted); font-size: 0.85rem; }
.wtb-tenure-date-row { display: flex; align-items: baseline; gap: 8px; }
.wtb-tenure:empty { visibility: hidden; }
.wtb-budget { color: var(--accent); font-weight: 700; }
.wtb-agent { font-size: 0.85rem; color: var(--text-muted); }
.wtb-agent a { color: var(--text-dark); font-weight: 600; text-decoration: none; }
.wtb-buttons-row { display: flex; gap: 8px; justify-content: flex-end; }
.wtb-match-slot, .wtb-action-slot { text-align: right; }
.wtb-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 8px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 900px) {
  .wtb-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
    padding: 16px;
  }
  /* Desktop keeps the tenure/land slot as an invisible-but-occupied grid
     cell so every row's columns stay aligned regardless of which rows
     happen to have that data — on mobile there's no column grid to keep
     aligned, so an empty one should just disappear instead of leaving an
     awkward blank line. */
  .wtb-tenure:empty { display: none; }
  .wtb-title { font-size: 1.05rem; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid #f1f5f9; }
  .wtb-tenure-date-row { margin: 2px 0; }
  .wtb-date { font-size: 0.78rem; }
  .wtb-budget { font-size: 1.1rem; display: block; margin: 4px 0; }
  .wtb-agent { display: block; margin-bottom: 10px; }
  .wtb-buttons-row {
    justify-content: flex-start;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
  }
  .wtb-match-slot, .wtb-action-slot { text-align: center; flex: 1 1 0; }
  .wtb-match-slot a, .wtb-match-slot span.btn, .wtb-action-slot a { display: block; width: 100%; box-sizing: border-box; text-align: center; }
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 36px 0 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.section-heading h2 { margin: 0; font-size: 1.2rem; }
@media (max-width: 480px) {
  .section-heading { flex-wrap: nowrap; }
  .section-heading h2 { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .section-heading .btn { flex-shrink: 0; padding: 6px 12px; font-size: 0.8rem; }
}

/* ---------- About page ---------- */
.about-content { line-height: 1.7; color: var(--text-dark); }
.about-content h2 { font-size: 1.15rem; margin: 28px 0 10px; }
.about-content h2:first-child { margin-top: 0; }
.about-content p { margin: 0 0 12px; color: #374151; }
.about-content ul { margin: 0 0 14px; padding-left: 22px; }
.about-content li { margin-bottom: 4px; color: #374151; }

/* ---------- Admin Sidebar Shell ---------- */
.admin-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}
.admin-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: #1e293b;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.admin-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-weight: 800;
  color: #fff;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin-sidebar-logo small { color: var(--accent); font-size: 0.75rem; letter-spacing: 1px; }
.admin-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  overflow-y: auto;
}
.admin-nav-link {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.admin-nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-nav-link.active { background: var(--accent); color: #fff; }
.admin-nav-lang summary { cursor: pointer; list-style: none; }
.admin-nav-lang summary::-webkit-details-marker { display: none; }
.admin-nav-lang summary::after { content: '\25BE'; float: right; }
.admin-nav-lang[open] summary::after { content: '\25B4'; }
.admin-nav-lang-option {
  display: block;
  padding: 8px 14px 8px 40px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.admin-nav-lang-option:hover { color: #fff; }
.admin-nav-lang-option.active { color: var(--accent); }
.admin-sidebar-divider {
  margin: 14px 14px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #64748b;
}
.admin-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.admin-sidebar-user img, .admin-sidebar-user-fallback {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.admin-sidebar-user-fallback {
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.admin-sidebar-user-name { color: #fff; font-weight: 700; font-size: 0.85rem; }
.admin-sidebar-user-role { font-size: 0.72rem; color: #94a3b8; }
.admin-sidebar-user-status { font-size: 0.68rem; color: #4ade80; display: flex; align-items: center; gap: 4px; }
.admin-sidebar-user-status span { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.admin-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.admin-hamburger {
  display: none;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: #374151;
}
.admin-hamburger-icon { font-size: 1.3rem; line-height: 1; }
.admin-hamburger-text { font-size: 0.85rem; font-weight: 700; color: #2563EB; }
.admin-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #1f2937;
  font-weight: 600;
  font-size: 0.88rem;
}
.admin-content { padding: 24px; flex: 1; }

.admin-welcome h2 { margin: 0 0 4px; font-size: 1.4rem; }
.admin-welcome p { margin: 0 0 20px; color: #6b7280; }

.admin-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .admin-two-col { grid-template-columns: 1fr; } }

.admin-panel {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  padding: 20px;
}
.admin-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.admin-panel-header h3 { margin: 0; font-size: 1.05rem; }
.admin-panel-header .btn { padding: 6px 14px; font-size: 0.8rem; }

.admin-mini-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-mini-table th, .admin-mini-table td { padding: 8px 6px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.admin-mini-table th { color: #9ca3af; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.admin-mini-table .icon-btn { text-decoration: none; color: #6b7280; margin-right: 6px; font-size: 0.95rem; }
.admin-view-all { display: inline-block; margin-top: 12px; font-size: 0.85rem; font-weight: 600; color: var(--telegram); text-decoration: none; }

.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 700px) { .summary-cards { grid-template-columns: 1fr 1fr; } }
.summary-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 14px;
}
.summary-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.summary-card .num { font-size: 1.3rem; font-weight: 800; }
.summary-card .lbl { font-size: 0.78rem; color: #6b7280; }
.summary-card .sub { font-size: 0.68rem; color: #9ca3af; }

.match-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 6px;
}
.match-count-badge.zero { background: #e5e7eb; color: #9ca3af; }

/* ---------- Matching page listing cards (admin/matching.php) — same visual
   language as the public homepage's listing cards, for consistency, but
   linking to view_matches.php instead of opening the public detail modal. ---------- */
.match-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.match-listing-card { text-decoration: none; color: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.match-listing-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.match-listing-card .card-thumb-wrap { position: relative; }
.match-listing-card .match-count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  height: auto;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ---------- Matching page WTB cards — same card family as
   .match-listing-card above, but without a photo (WTB requests are just
   text criteria: location, house type, budget). The badge sits inline in
   its own top row instead of overlaid on an image. ---------- */
.match-wtb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.match-wtb-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.match-wtb-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.match-wtb-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.match-wtb-card-top .card-title { margin: 0; }
.match-wtb-card .match-count-badge { flex-shrink: 0; }

@media (max-width: 640px) {
  /* Force 2 columns on mobile — the default auto-fill(minmax(220px, 1fr))
     only fits ONE column on a narrow phone screen (220px x2 exceeds
     available width), which looked sparse/wasteful for a page that's
     mostly small cards. */
  .match-listing-grid,
  .match-wtb-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ---------- Dashboard preview rows (mobile-friendly, no horizontal scroll) ---------- */
.preview-list { display: flex; flex-direction: column; }
.preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
.preview-row:last-child { border-bottom: none; }
.preview-main { flex: 1 1 160px; min-width: 0; }
.preview-main strong { display: block; font-size: 0.88rem; }
.preview-meta { display: block; font-size: 0.76rem; color: #6b7280; margin-top: 1px; }
.preview-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.preview-price { font-size: 0.85rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
@media (max-width: 480px) {
  .preview-row { padding: 12px 0; }
  .preview-side { width: 100%; justify-content: space-between; order: 3; margin-top: 4px; }
}

@media (max-width: 900px) {
  .admin-sidebar {
    position: fixed;
    left: -240px;
    z-index: 100;
    transition: left 0.2s ease;
  }
  .admin-sidebar.open { left: 0; }
  .admin-hamburger { display: flex; }
}

.admin-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
}
.admin-table-wrap table { min-width: 560px; }

@media (max-width: 640px) {
  .admin-content { padding: 14px; }
  .admin-topbar { padding: 12px 14px; }
  .admin-topbar-user span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-welcome h2 { font-size: 1.15rem; }
  .admin-quick-actions .btn { flex: 1 1 auto; text-align: center; font-size: 0.82rem; padding: 8px 10px; }
  .admin-panel { padding: 14px; }
  .summary-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .summary-card { padding: 12px; }


}

@media (max-width: 900px) {
  /* Responsive table -> stacked cards on tablet/mobile */
  .admin-table-wrap table.admin-table-responsive,
  .admin-table-wrap table.admin-table-responsive thead,
  .admin-table-wrap table.admin-table-responsive tbody,
  .admin-table-wrap table.admin-table-responsive th,
  .admin-table-wrap table.admin-table-responsive td,
  .admin-table-wrap table.admin-table-responsive tr {
    display: block;
    width: 100%;
  }
  .admin-table-wrap table.admin-table-responsive { min-width: 0; }
  .admin-table-wrap table.admin-table-responsive thead { display: none; }
  .admin-table-wrap table.admin-table-responsive tr {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fff;
  }
  .admin-table-wrap table.admin-table-responsive td {
    border: none;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    text-align: right;
  }
  .admin-table-wrap table.admin-table-responsive td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    text-align: left;
    flex-shrink: 0;
  }
  .admin-table-wrap table.admin-table-responsive td:empty,
  .admin-table-wrap table.admin-table-responsive td:not([data-label]):not(.ls-mobile-title-td) {
    display: none;
  }
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"]::before {
    flex-shrink: 0;
    align-self: center;
    margin-right: auto;
  }
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] > a.btn,
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] > button.btn {
    flex: 0 0 auto;
  }
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] > a.btn:first-of-type { flex: 0 0 20%; font-size: 0.80rem; padding: 5px 4px; }
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] > button.btn:nth-of-type(1) { flex: 0 0 30%; font-size: 0.80rem; padding: 5px 4px; }
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] > button.btn:nth-of-type(2) { flex: 0 0 20%; font-size: 0.80rem; padding: 5px 4px; }
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] > form,
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] > div {
    flex: 1 1 100%;
    width: 100%;
  }
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] form button,
  .admin-table-wrap table.admin-table-responsive td[data-label="Actions"] > div button {
    width: 100%;
    text-align: center;
  }
}

/* ---------- Platform checkboxes ---------- */
.platform-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.platform-checklist label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 400;
  background: #f9fafb;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.platform-checklist input { width: auto; }
.platform-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.platform-tag {
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---------- WTB info cards ---------- */
.wtb-info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 720px) {
  .wtb-info-cards { grid-template-columns: 1fr; }
}
.wtb-promo-card, .wtb-explain-card {
  border-radius: 16px;
  padding: 24px;
}
.wtb-promo-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
}
.wtb-explain-card {
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wtb-promo-card h3, .wtb-explain-card h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.wtb-promo-card h3 { color: #92400e; }
.wtb-explain-card h3 { color: #1e40af; }
.wtb-promo-card p, .wtb-explain-card p {
  margin: 0 0 14px;
  color: #57534e;
  font-size: 0.9rem;
}
.wtb-explain-card p { color: #3b4a63; margin-bottom: 0; }
.wtb-promo-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.wtb-promo-card li {
  font-size: 0.88rem;
  color: #78350f;
  padding: 5px 0;
}

/* ---------- Daily posting checklist page ---------- */
.checklist-list { display: flex; flex-direction: column; gap: 14px; }
.checklist-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.checklist-card-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .checklist-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}
.checklist-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (min-width: 641px) {
  .checklist-actions { min-width: 220px; justify-content: flex-end; }
}
/* Web (default): simple nested flex, no width constraint — Download+Telegram
   cluster together, Push+Buang cluster together, both clusters flow as
   normal items within the outer .checklist-actions row (so on a wide
   screen everything ends up reading left-to-right in one row anyway).
   Avoiding display:contents here deliberately — it has had inconsistent
   behaviour in some mobile browsers, not worth the risk for this. */
.checklist-buttons {
  display: flex;
  gap: 8px;
}
.checklist-buttons .tg-btn {
  margin-top: 0;
  min-height: auto;
}
.checklist-push-row {
  display: flex;
  gap: 8px;
}
.checklist-push-row .btn-danger { flex: 1; }
@media (max-width: 640px) {
  .checklist-actions {
    width: 100%;
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
  }
  .checklist-actions .btn, .checklist-actions .tg-btn {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .checklist-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .checklist-buttons:has(> :only-child) {
    grid-template-columns: 1fr;
  }
  .checklist-buttons .btn, .checklist-buttons .tg-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .checklist-push-row {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .checklist-push-row form { flex: 3; }
  .checklist-push-row form button { width: 100%; }
  .checklist-push-row .btn-danger { flex: 1; }
  .checklist-actions .btn, .checklist-actions .tg-btn, .checklist-actions form {
    flex: 1 1 auto;
    min-width: fit-content;
  }
}
.checklist-title-wrap { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .checklist-title-wrap { width: 100%; }
}
.checklist-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.checklist-meta {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.checklist-progress {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
}
.checklist-progress-count { font-size: 0.85rem; font-weight: 700; color: #4b5563; }
.checklist-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  margin-top: 6px;
  overflow: hidden;
}
.checklist-progress-fill {
  height: 100%;
  background: #16a34a;
  border-radius: 999px;
  transition: width 0.2s ease;
}

/* ---------- Listing detail popup modal ---------- */
.listing-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.6);
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}
.listing-modal-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.listing-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 640px;
  width: 100%;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  touch-action: manipulation;
}
.listing-modal-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 5;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.listing-modal-loading {
  padding: 80px 20px;
  text-align: center;
  color: #9ca3af;
}
.listing-modal-details { padding: 18px 20px 20px; }
.listing-modal-price { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); }
.listing-modal-agent-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Gallery — horizontal scroll-snap, swipeable natively on touch, no JS
   swipe library needed. Arrows/dots are enhancements for desktop/clarity. */
.listing-gallery {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #111827;
  touch-action: pan-x;
}
.listing-gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  height: 100%;
  scrollbar-width: none;
  touch-action: pan-x;
}
.listing-gallery-track::-webkit-scrollbar { display: none; }
.listing-gallery-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
}
.listing-gallery-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280;
}
.listing-gallery-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
.listing-gallery-arrow-left { left: 10px; }
.listing-gallery-arrow-right { right: 10px; }
.listing-gallery-dots {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
  z-index: 3;
}
.listing-gallery-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}
.listing-gallery-dot.active { background: #fff; width: 18px; border-radius: 3px; }

@media (max-width: 640px) {
  .listing-modal-overlay { padding: 0; }
  .listing-modal { border-radius: 0; max-width: 100%; min-height: 100vh; }
}

/* ---------- 2-column mobile grid — All Listing page only ---------- */
@media (min-width: 900px) {
  .grid-2col-mobile {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-2col-mobile {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .grid-2col-mobile .card-body { padding: 10px; }
  .grid-2col-mobile .card-title {
    font-size: 0.82rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .grid-2col-mobile .card-state {
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .grid-2col-mobile .card-specs { font-size: 0.68rem; }
  .grid-2col-mobile .card-row { flex-wrap: wrap; gap: 4px; }
  .grid-2col-mobile .price { font-size: 0.85rem; }
  .grid-2col-mobile .old-price { font-size: 0.68rem; }
  .grid-2col-mobile .badge { font-size: 0.55rem; padding: 2px 6px; }
  /* Both Telegram and Download stay reachable via the listing popup (tap
     the photo) — hiding the whole footer row keeps the compact 2-column
     card focused on the key info (price/specs/agent) without a cramped
     button row squeezed underneath. */
  .grid-2col-mobile .tg-btn,
  .grid-2col-mobile .card-body > div[style*="display:flex"] { display: none !important; }
  /* Exception — brand-site's card footer (Details + WhatsApp) uses the
     same .tg-btn/flex-wrapper classes as the main site's Telegram/Download
     row, but isn't redundant with any popup here, so it should stay
     visible even in the compact 2-column view. */
  .grid-2col-mobile .card-body > div[style*="display:flex"]:has(.btn-whatsapp) {
    display: flex !important;
  }
  .grid-2col-mobile .tg-btn.btn-whatsapp {
    display: flex !important;
  }
  .grid-2col-mobile .card-view-hint,
  .grid-2col-mobile .photo-count-badge { font-size: 0.6rem; padding: 2px 6px; }
  .grid-2col-mobile .card-agent-avatar { width: 24px; height: 24px; }
  .grid-2col-mobile .coa-mark-btn,
  .grid-2col-mobile .not-my-listing-badge,
  .grid-2col-mobile .no-coa-badge { font-size: 0.6rem; padding: 3px 7px; }
  /* "Disiarkan X ago · Ejen: Name" — truncate to one line instead of
     wrapping/pushing the card taller at this narrow width. */
  .grid-2col-mobile .listing-age-split {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .grid-2col-mobile .listing-posted { font-size: 0.65rem; }
  .grid-2col-mobile .listing-agent-row {
    width: 100%;
    justify-content: space-between;
    font-size: 0.68rem;
  }
  .grid-2col-mobile .listing-agent-name { max-width: 100%; }
  /* Telegram/Download side-by-side would be unreadably narrow at 2 columns
     — stack them instead. */
  .grid-2col-mobile .card-body > div[style*="display:flex"] {
    flex-direction: column;
  }
  .grid-2col-mobile .tg-btn { font-size: 0.75rem; padding: 8px 6px; margin-top: 6px; }
}

/* ---------- Shared listing filter bar (Buy/Rent tabs, Location checkbox
   tree, Property Type/Price/Tenure/Land/Status pills) — listing_filter.php ---------- */
.lf-wrap { margin-bottom: 20px; }
.lf-tabs { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 0; }
.lf-tab {
  padding: 10px 28px;
  border-radius: 10px 10px 0 0;
  background: #e5edff;
  color: #374151;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
}
.lf-tab.active { background: #2563eb; color: #fff; }
.lf-tab-static {
  background: #f3f4f6;
  color: #6b7280;
  cursor: default;
}
.lf-tab-agency {
  background: #f59e0b;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 1.3;
}
.lf-tab-agency:hover { background: #d97706; }

.lf-form { background: #eef4ff; border-radius: 0 0 16px 16px; padding: 16px; }
.lf-main-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.lf-secondary-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

.lf-search-wrap {
  flex: 1 1 260px;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: stretch;
}
.lf-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
input.lf-search-input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 14px 0 38px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.92rem;
  background: #fff;
  transition: padding-right 0.1s ease;
}
/* Only reserve room for the Go button once it's actually visible — with
   it hidden (the common case, nothing typed/selected yet), the full width
   is free for the placeholder text instead of leaving 70px permanently
   blocked off for a button that isn't there, which was especially
   noticeable on narrow mobile screens truncating the placeholder. */
.lf-search-wrap.has-go-btn input.lf-search-input {
  padding-right: 70px;
}
.lf-search-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #b91c1c;
  border: 1px solid #d1d5db;
  padding: 0 18px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.88rem;
}

.lf-dropdown { position: relative; }
.lf-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}
.lf-pill-btn.active {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.lf-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lf-location-btn { justify-content: flex-start; }
.lf-caret { font-size: 1rem; color: #9ca3af; margin-left: 2px; }
.lf-pill-btn.active .lf-caret { color: #dc2626; }
.lf-badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 2px;
}
.lf-clear-all {
  font-size: 0.85rem;
  color: #dc2626;
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
}
.lf-clear-all-mobile-slot:empty { display: none; }

/* "More Filter" reveal — desktop: hidden until toggled, then shows inline
   as extra pills in the same row (wraps naturally). Mobile: irrelevant on
   its own since the WHOLE secondary row is already hidden/shown as one
   unit by the mobile Filter toggle — this just needs to not add an extra
   layer of hiding on top of that. */
.lf-more-filters {
  display: none;
}
.lf-more-filters.lf-more-open {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.lf-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 14px;
  min-width: 240px;
}
.lf-panel.open { display: block; }
.lf-panel label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  margin: 8px 0 4px;
}
.lf-panel label:first-child { margin-top: 0; }
.lf-panel select {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.85rem;
}
.lf-panel-actions { display: flex; gap: 8px; margin-top: 12px; }
.lf-panel-clear {
  background: #f3f4f6; border: none; color: #374151; font-size: 0.85rem;
  font-weight: 700; cursor: pointer; padding: 8px 18px; border-radius: 8px;
  flex: 1;
}
.lf-panel-done {
  background: #2563eb; color: #fff; border: none; border-radius: 8px;
  font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 8px 18px;
  flex: 1;
}
.lf-panel-mobile-header { display: none; }

/* ---- Simple labeled native-select fields (Min/Max Price, Bedrooms,
   Bathrooms, Tenure Type, Land Title, Status) — the field shows its own
   current value directly and opens as an ordinary browser <select>, no
   custom JS panel needed. Matches the "label above, value below" look. ---- */
@media (min-width: 1025px) {
  .lf-more-filters .lf-dropdown {
    min-width: 150px;
  }
}
.lf-field-box {
  position: relative;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  min-width: 150px;
  flex: 1 1 150px;
  height: 44px;
  display: flex;
  align-items: center;
}
.lf-field-box.has-value {
  background: #fef2f2;
  border-color: #fecaca;
}
.lf-field-box label {
  display: none;
  position: absolute;
  top: 5px; left: 12px;
  font-size: 0.64rem;
  color: #6b7280;
  font-weight: 700;
  pointer-events: none;
}
.lf-field-box.has-value label { display: block; color: #dc2626; }
.lf-field-box .lf-placeholder {
  position: absolute;
  left: 12px; right: 28px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lf-field-box.has-value .lf-placeholder { display: none; }
.lf-field-box select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  color: transparent; /* native text hidden by default — .lf-placeholder shows the field name instead */
  padding: 0 28px 0 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.lf-field-box.has-value select {
  color: #dc2626; /* real selected value now visible, red like other active filters */
  padding-top: 13px; /* room for the floating label above it */
}
.lf-field-box::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.lf-field-box.has-value::after {
  border-right-color: #dc2626;
  border-bottom-color: #dc2626;
}

/* ---- Location checkbox tree ---- */
.lf-panel-scroll { width: 300px; padding: 10px; }
.lf-loc-search {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.lf-loc-tree { max-height: 320px; overflow-y: auto; }
.lf-loc-state { border-bottom: 1px solid #f3f4f6; }
.lf-loc-state-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; }
.lf-loc-checkbox-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.88rem; color: #1f2937; cursor: pointer; flex: 1;
}
.lf-loc-checkbox-label input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: #2563eb; }
.lf-loc-expand {
  background: none; border: none; cursor: pointer; color: #6b7280;
  font-size: 0.75rem; padding: 6px 8px; transition: transform 0.15s;
}
.lf-loc-state.expanded .lf-loc-expand { transform: rotate(180deg); }
.lf-loc-districts { display: none; padding: 0 4px 8px 26px; background: #f9fafb; }
.lf-loc-state.expanded .lf-loc-districts { display: block; }
.lf-loc-district-label { padding: 5px 0; font-size: 0.84rem; }

/* Property Type only — show just the first 3 types per category by
   default (mobile especially looked overwhelming showing everything at
   once); a "+ See More" link reveals the rest. Location's tree is
   untouched (different class scope). */
.lf-category-tree .lf-loc-districts .lf-loc-district-label:nth-of-type(n+4) {
  display: none;
}
.lf-category-tree .lf-loc-districts.lf-show-all .lf-loc-district-label {
  display: flex;
}
.lf-see-more-btn {
  display: block;
  background: none;
  border: none;
  color: #2563eb;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
}

/* ---- Mobile-only "Filter" toggle for the secondary row ---- */
.lf-mobile-filter-toggle { display: none; }
.lf-mobile-sort-slot { display: none; }
.lf-mobile-filter-header { display: none; }
.lf-mobile-filter-search { display: none; }

@media (max-width: 1024px) {
  /* iOS Safari auto-zooms the page when focusing any input/select with
     font-size under 16px — force 16px minimum on every field here so
     typing/tapping a dropdown doesn't trigger that zoom. */
  input.lf-search-input,
  .lf-field-box select,
  .lf-loc-search,
  .lf-panel select {
    font-size: 16px;
  }
  .lf-form { padding: 10px; border-radius: 0 0 10px 10px; }
  .lf-tab { padding: 8px 20px; font-size: 0.85rem; }
  .lf-tab-agency { flex: 1; padding: 8px 12px; }
  .lf-main-row { gap: 8px; }
  /* Row 1: Search input (80%) + Search button (20%). */
  .lf-main-row .lf-search-wrap { flex: 1 1 100%; order: 1; height: 42px; }
  .lf-main-row .lf-search-btn { padding: 0 12px; font-size: 0.76rem; }
  /* Row 2: Location (38%) + Property Type (47%) + Filter (15%) — no Sort
     here, coalisting.com's sort lives separately below the search bar. */
  .lf-main-row .lf-dropdown { min-width: 0; order: 2; }
  .lf-main-row .lf-dropdown-location { flex: 0 1 calc(32% - 12px); }
  .lf-main-row .lf-dropdown-category { flex: 0 1 calc(44% - 16px); }
  .lf-main-row .lf-dropdown .lf-pill-btn { width: 100%; font-size: 0.8rem; padding-left: 10px; padding-right: 10px; }
  .lf-mobile-filter-toggle { order: 2; flex: 0 1 calc(12% - 5px); min-width: 0; padding: 6px 2px; font-size: 0.82rem; flex-direction: column; gap: 2px; background: #eef4ff; border: none; border-radius: 0; }
  .lf-mobile-sort-slot { order: 2; flex: 0 1 calc(12% - 5px); min-width: 0; display: flex; }
  /* height:100% on a flex-stretched parent is unreliable (percentage
     heights need the containing block to have an explicit height, which
     a stretched-but-not-explicitly-sized flex parent doesn't count as in
     every browser) — align-self:stretch uses the actual flex stretch
     mechanism instead, which is what correctly matches this to the
     Filter button's height every time. */
  .lf-mobile-sort-slot > div {
    display: flex !important;
    align-self: stretch;
    width: 100%;
  }
  .lf-mobile-sort-slot button {
    width: 100% !important;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px !important;
    padding: 6px 2px !important;
    font-size: 0.68rem !important;
    background: #eef4ff !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .lf-mobile-sort-slot svg { width: 15px; height: 15px; }
  .lf-clear-all-mobile-slot {
    order: 3;
    flex: 1 1 100%;
    text-align: center;
    margin-top: 4px;
  }

  /* Filter toggle reveals the secondary row (Min/Max Price, Bedrooms,
     etc.) in place — no popup, no duplicated fields. */
  .lf-mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #eef4ff;
    border: none;
    border-radius: 0;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
  }
  .lf-mobile-sort-slot { display: flex; }
  .lf-pill-icon { display: none; }
  .lf-secondary-row {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
  }
  .lf-secondary-row.lf-mobile-open {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background: #fff;
    margin-top: 0;
    padding: 0 16px 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .lf-mobile-filter-header {
    display: none;
  }
  .lf-panel.open .lf-panel-mobile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    background: #fff;
    padding: 16px 0 16px 16px;
    margin: 0 -16px 12px;
    border-bottom: 1px solid #f3f4f6;
  }
  .lf-secondary-row.lf-mobile-open .lf-mobile-filter-header {
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    background: #fff;
    padding: 16px 0;
    margin: 0 -16px 4px;
    padding-left: 16px;
    border-bottom: 1px solid #f3f4f6;
    order: -2;
  }
  .lf-mobile-filter-back {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #1f2937;
    padding: 4px;
  }
  .lf-mobile-filter-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
  }
  .lf-mobile-filter-search {
    display: none;
  }
  .lf-secondary-row.lf-mobile-open .lf-mobile-filter-search {
    display: block;
    position: sticky;
    bottom: 0;
    width: 100%;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin-top: auto;
  }
  .lf-secondary-row .lf-dropdown { width: 100%; }
  .lf-secondary-row .lf-pill-btn { width: 100%; justify-content: space-between; height: 42px; }
  .lf-secondary-row .lf-field-box,
  .lf-secondary-row .lf-more-filters { width: 100%; }
  .lf-secondary-row .lf-field-box {
    flex: 0 0 auto;
    height: 44px;
    min-width: 0;
  }
  .lf-more-filter-wrap { display: none; }
  .lf-more-filters { display: flex !important; flex-direction: column; gap: 14px; width: 100%; }

  /* Location/Property Type panels — TRUE full-screen takeover on mobile.
     Deliberately NOT using percentage-based centering (top:X%, translateX,
     etc.) since that math depends on the trigger button's own size/position
     and easily ends up pushing content (like the search box at the top of
     the list) off-screen or behind other elements. Filling the whole
     viewport sidesteps all of that — guaranteed visible regardless of
     content height or which button opened it. */
  .lf-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    transform: none;
    border-radius: 0;
    z-index: 600;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: none;
  }
  .lf-panel.open { display: flex; flex-direction: column; }
  .lf-panel-scroll { width: 100%; }
  .lf-loc-tree { flex: 1 1 auto; max-height: none; }
  .lf-panel-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 10px;
    margin-top: auto;
  }
  .lf-clear-all { text-align: center; width: 100%; margin-top: 4px; }
}

/* More dropdown menu (listing_saya.php) */
.ls-more-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; font-size: 0.85rem; font-weight: 600;
  background: none; border: none; cursor: pointer;
  color: var(--text-dark); border-radius: 7px;
  text-decoration: none; box-sizing: border-box;
}
.ls-more-item:hover { background: #f1f5f9; }

/* Title cell with thumbnail (listing_saya.php) */
.ls-title-cell { display: flex; flex-direction: column; gap: 4px; }
.ls-title-bottom { display: flex; gap: 10px; align-items: center; }
.ls-title-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; display: none; }
.ls-title-thumb-empty { width: 40px; height: 40px; border-radius: 6px; background: #f1f5f9; display: none; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.ls-title-desktop { flex: 1; min-width: 0; overflow: hidden; }
.ls-title-desktop > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

/* Fix admin table title column to consistent width */
table.admin-table td[data-label="Title"] { width: 320px; max-width: 320px; padding-right: 19px; }
table.admin-table td[data-label="Title"] .ls-title-desktop,
table.admin-table td[data-label="Title"] .ls-title-text { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-title-meta { font-size: 0.72rem; color: #9ca3af; }

@media (max-width: 900px) {
  .ls-standalone-thumb { display: none !important; }
  .ls-title-desktop { display: none; }
  .ls-title-thumb { display: block; }
  .ls-title-thumb-empty { display: flex; }
}

/* Fix title to 1 line */
.ls-mobile-only { display: none; }
@media (max-width: 900px) { .ls-mobile-only { display: flex; } }
.ls-desktop-only { display: flex; }
@media (max-width: 900px) { .ls-desktop-only { display: none; } }

.ls-in-trash-label { font-size:0.78rem; color:#9ca3af; font-weight:700; }
.ls-mobile-title-row { display: none; }
@media (max-width: 900px) {
  .ls-mobile-title-row { display: table-row; }
  .ls-mobile-title-row td { background: #fff; border-bottom: none !important; padding-bottom: 0 !important; }
  /* Group title row + data row — remove top border on data row that follows title row */
  .ls-mobile-title-row + tr { border-top: none !important; }
  /* Wrap both rows in one visual card — title row gets top border+radius, data row gets bottom */
  .admin-table-wrap table.admin-table-responsive .ls-mobile-title-row {
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .admin-table-wrap table.admin-table-responsive .ls-mobile-title-row + tr {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-bottom: 12px;
  }
}

/* Admin page tabs (bookmark_checklist.php etc) */
.admin-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--border); }
.tab-btn {
  padding: 10px 20px;
  border-radius: 8px 8px 0 0;
  background: #f3f4f6;
  color: #374151;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-bottom: none;
  margin-bottom: -2px;
}
.tab-btn.active { background: #fff; color: #2563eb; border-color: var(--border); border-bottom-color: #fff; }
.tab-btn:hover:not(.active) { background: #e5edff; }


/* Type column - smaller font on listing tables */
table.admin-table td[data-label="Type"] { font-size: 0.68rem; }