/* =========================================================
   UpLuy — Design tokens
   Palette derived from the logo: blue gradient arrow (U/roof)
   over deep navy wordmark.
   ========================================================= */
:root {
  --blue-500: #2F6BFF;
  --blue-700: #12409E;
  --blue-900: #0A2151;
  --navy: #0B1233;
  --ink: #172033;
  --ink-soft: #4B5468;
  --bg: #FFFFFF;
  --bg-soft: #F5F7FB;
  --border: #E4E8F1;
  --success: #1FAA59;
  --success-bg: #E8F8EE;
  --warning: #C8871B;
  --warning-bg: #FBF1DF;
  --danger: #D6423A;
  --danger-bg: #FBEAE9;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(11, 18, 51, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 18, 51, 0.10);
  --shadow-lg: 0 18px 48px rgba(11, 18, 51, 0.16);
  --grad-brand: linear-gradient(135deg, #3E7BFF 0%, #12409E 55%, #0A2151 100%);
  --font-display: 'Poppins', 'Noto Sans Khmer', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Noto Sans Khmer', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0 0 .4em;
  line-height: 1.2;
  font-weight: 600;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #93B4FF; outline-offset: 2px; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---- Roofline signature divider: echoes the logo's arrow/roof ---- */
.roofline {
  width: 46px; height: 14px; margin: 10px 0 18px;
  background: var(--grad-brand);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
.roofline.center { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 600; font-size: 15px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-outline:hover { border-color: var(--blue-500); color: var(--blue-700); }
.btn-ghost { background: transparent; color: var(--ink-soft); padding: 8px 12px; }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy); }
.brand img { height: 48px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 500; font-size: 15px; }
.nav-links a:hover, .nav-links a.active { color: var(--blue-700); background: var(--bg-soft); }
/* Hidden on desktop, where the prominent "+ Post a property" button in
   the header already covers this — shown again on mobile (see media
   query below), where that button is hidden and this is the only way
   to reach posting from the hamburger menu. */
.nav-post-link { display: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 999px; padding: 3px; font-size: 12px; font-weight: 700; }
.lang-switch a { padding: 5px 10px; border-radius: 999px; color: var(--ink-soft); }
.lang-switch a.active { background: var(--grad-brand); color: #fff; }
.nav-toggle { display: none; background: none; border: none; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--border); }
.user-chip .avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--grad-brand); }
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 10px); background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 200px; padding: 8px; display: none; z-index: 50;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm);
  border: none; background: none; font-size: 14px; color: var(--ink);
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--bg-soft); }

/* ---- Hero ---- */
.hero {
  background: var(--grad-brand); padding: 46px 0; position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.search-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px;
  margin-top: -34px; position: relative; z-index: 5;
}
.search-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.search-tabs button {
  border: none; background: var(--bg-soft); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-soft);
}
.search-tabs button.active { background: var(--grad-brand); color: #fff; }
.search-grid { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; align-items: end; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.field select, .field input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; background: #fff; color: var(--ink);
}
.field select:focus, .field input:focus { border-color: var(--blue-500); }

/* ---- Sections ---- */
.section { padding: 56px 0; }
/* Tighten the gap specifically between "Featured listings" and
   "Browse by category" — they read as one continuous browse area.
   (section.section-featured/-categories beat the later .section
   media-query rules on specificity, so this stays narrow at every
   breakpoint.) Featured's top padding is also trimmed so the
   search/filter card above it doesn't leave a big gap before it —
   Featured is the first of the two sections now. */
section.section-featured { padding-top: 16px; padding-bottom: 16px; }
section.section-categories { padding-top: 16px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.section-head p { color: var(--ink-soft); margin: 0; }
.muted { color: var(--ink-soft); }

.homepage-banner { flex: 1 1 320px; max-width: 420px; margin: 0 auto; border-radius: var(--radius-md); overflow: hidden; }
.homepage-banner img { width: 100%; height: 84px; object-fit: cover; display: block; }
.homepage-banner a { display: block; }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.cta-banner {
  background: var(--grad-brand); border-radius: var(--radius-lg); padding: 36px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-banner h2 { color: #fff; margin-bottom: 6px; }
.cta-banner p { color: rgba(255,255,255,.85); margin: 0; }
.cta-banner .btn-primary { background: #fff; color: var(--blue-700); flex-shrink: 0; }
.cta-banner .btn-primary:hover { background: #fff; box-shadow: var(--shadow-lg); }
.category-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex; align-items: center; gap: 16px;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.category-card .icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--grad-brand); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex-shrink: 0; }
.category-card .icon.has-image { background: var(--bg-soft); padding: 8px; }
.cat-icon-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Category picker (post-property.php): every card gets the same fixed icon box, whether the
   icon is an emoji or an uploaded image, so icons are centred and the names line up across
   the row. (A bare <img> is a block element site-wide, which is what used to push uploaded
   icons to the left and leave a blank line under them.) */
.type-picker .tp-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.type-picker .tp-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; font-size: 26px; line-height: 1; }
.type-picker-icon { display: block; height: 34px; width: auto; max-width: 64px; object-fit: contain; }
.admin-cat-icon { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; border-radius: 6px; }
.category-card-text { min-width: 0; }
.category-card h3 { margin-bottom: 4px; }

/* ---- Listing cards / grid ---- */
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.listing-card {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #fff;
  transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column;
}
.listing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.listing-card:focus-within { box-shadow: var(--shadow-md); }
/* The whole card is clickable via a "stretched link" so the visible favorite
   button (a real sibling, not nested inside the link) stays independently
   tappable — avoids invalid/unreliable nested-interactive-element markup. */
.listing-card-link { position: absolute; inset: 0; z-index: 1; }
.listing-card-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.listing-thumb { position: relative; aspect-ratio: 4/3; background: var(--bg-soft) center/cover no-repeat; }
.listing-thumb .badge {
  position: absolute; top: 12px; left: 12px; background: rgba(11,18,51,.82); color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; text-transform: capitalize; z-index: 2; pointer-events: none;
}
.listing-thumb .fav-btn {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92);
  border: none; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--danger);
  z-index: 3; box-shadow: var(--shadow-sm);
}
.listing-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.listing-price { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--navy); }
.listing-title {
  font-size: 15px; font-weight: 600; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.listing-loc { font-size: 13px; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-meta { display: flex; gap: 14px; font-size: 13px; color: var(--ink-soft); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.listing-meta span { display: flex; align-items: center; gap: 5px; }

.status-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.status-pending { background: var(--warning-bg); color: var(--warning); }
.status-published { background: var(--success-bg); color: var(--success); }
.status-rejected { background: var(--danger-bg); color: var(--danger); }
.status-draft, .status-archived { background: var(--bg-soft); color: var(--ink-soft); }
.status-awaiting_payment { background: var(--warning-bg); color: var(--warning); }
.status-sold, .status-rented { background: #EDEBFB; color: #5B3FCF; }

/* ---- Listings page layout (filters + results + map) ---- */
.listings-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
.filters-panel { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; position: sticky; top: 90px; }
.filters-panel h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 10px; }
.filter-group { margin-bottom: 20px; }
.filter-group .field + .field { margin-top: 10px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.range-row { display: flex; gap: 8px; }
.range-row select, .range-row input {
  flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; background: #fff; color: var(--ink);
}
.range-row select:focus, .range-row input:focus { border-color: var(--blue-500); }

.results-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button { border: none; background: #fff; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.view-toggle button.active { background: var(--grad-brand); color: #fff; }
.filter-toggle-btn { display: none; margin: 16px 0; }
.filters-panel-close { display: none; }
.filters-backdrop { display: none; }

/* List view: same .listing-card markup as grid view, just rearranged
   horizontally via a modifier class on the results container — no
   separate template or re-fetch needed to switch between them. */
.listing-grid.view-list { grid-template-columns: 1fr; gap: 14px; }
.listing-grid.view-list .listing-card { flex-direction: row; }
.listing-grid.view-list .listing-thumb { flex: 0 0 220px; aspect-ratio: 4/3; }
.listing-grid.view-list .listing-body { padding: 14px 20px; }
.listing-grid.view-list .listing-title { -webkit-line-clamp: 1; }
.listing-grid.view-list .listing-meta { margin-top: 6px; padding-top: 8px; }


.load-more-wrap { display: flex; justify-content: center; padding: 30px 0; }
.load-more-wrap .btn { min-width: 160px; }
.load-more-wrap .spinner { width: 18px; height: 18px; }
.load-more-icon { width: 15px; height: 15px; margin-left: 4px; vertical-align: -3px; animation: load-more-bounce 1.6s ease-in-out infinite; }
@keyframes load-more-bounce { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.load-more-count {
  font-size: 12px; font-weight: 700; background: rgba(255,255,255,.25); color: inherit;
  padding: 2px 9px; border-radius: 999px; line-height: 1.6;
}
.btn-primary .load-more-count { background: rgba(255,255,255,.25); }
.btn-outline .load-more-count { background: var(--bg-soft); color: var(--ink-soft); }
.scroll-end { text-align: center; padding: 20px 0; font-size: 14px; }
.ad-slot { text-align: center; }
.ad-slot-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.pagination a { padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 14px; }
.pagination a.current { background: var(--grad-brand); color: #fff; border-color: transparent; }

/* ---- Forms / auth ---- */
.auth-wrap { max-width: 420px; margin: 60px auto; padding: 0 20px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; color: var(--ink); background: #fff;
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group .hint { font-size: 12px; color: var(--ink-soft); margin-top: 5px; }
.pin-input-group { display: flex; gap: 10px; }
.pin-input-group input { text-align: center; font-size: 22px; letter-spacing: 4px; font-weight: 700; }
.tab-switch { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-switch button { flex: 1; border: none; background: none; padding: 12px; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid transparent; }
.tab-switch button.active { color: var(--blue-700); border-color: var(--blue-500); }
.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success); }
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; }
.has-error input, .has-error select { border-color: var(--danger) !important; }

/* ---- Wizard (post property) ---- */
.wizard-steps { display: flex; justify-content: space-between; margin-bottom: 30px; counter-reset: step; }
.wizard-steps .step { flex: 1; text-align: center; position: relative; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.wizard-steps .step::before {
  counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); color: var(--ink-soft); margin: 0 auto 8px; font-weight: 700;
}
.wizard-steps .step.active::before, .wizard-steps .step.done::before { background: var(--grad-brand); color: #fff; }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }
.wizard-actions { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.type-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.type-picker label {
  border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 18px 10px; text-align: center; cursor: pointer; font-weight: 600; font-size: 14px;
}
.type-picker input { display: none; }
.type-picker input:checked + span { color: var(--blue-700); }
.type-picker label:has(input:checked) { border-color: var(--blue-500); background: #F0F5FF; }

.image-drop {
  position: relative; border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 30px; text-align: center; color: var(--ink-soft); cursor: pointer;
}
.image-drop:hover { border-color: var(--blue-500); }
.image-drop.dragging { border-color: var(--blue-500); background: #F0F5FF; }
/* The real <input type="file"> sits as an invisible overlay covering the
   whole drop zone, so a click IS a click on the input — no JS bridging
   (label click-forwarding, manual .click() calls) needed or relied on.
   This is deliberately not display:none/hidden: some browsers won't
   reliably open the file picker for an element that isn't rendered. */
.image-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; z-index: 2;
}
.avatar-drop {
  position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 2px dashed var(--border); flex-shrink: 0;
}
.avatar-drop.dragging { border-color: var(--blue-500); }
.avatar-drop img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg-soft); }
.avatar-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 2; }
.avatar-drop .avatar-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11,18,51,.55);
  color: #fff; font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .15s ease; text-align: center; padding: 4px;
}
.avatar-drop:hover .avatar-overlay { opacity: 1; }
.image-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.image-preview-grid .thumb { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.image-preview-grid .thumb img { width: 100%; height: 100%; object-fit: cover; }
.image-preview-grid .thumb .cover-tag { position: absolute; bottom: 6px; left: 6px; font-size: 10px; background: var(--grad-brand); color: #fff; padding: 2px 8px; border-radius: 999px; }
.image-preview-grid .thumb .remove-thumb {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(11,18,51,.75); color: #fff; border: none; font-size: 13px;
}

/* ---- Listing detail ---- */
.detail-gallery { border-radius: var(--radius-lg); overflow: hidden; }
.detail-gallery .main-img { background: var(--bg-soft) center/contain no-repeat; cursor: pointer; height: 440px; border-radius: var(--radius-lg); position: relative; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  background: rgba(11,18,51,.45); color: #fff; display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; transition: background .15s ease; backdrop-filter: blur(2px);
}
.gallery-nav:hover { background: rgba(11,18,51,.7); }
.gallery-nav svg { width: 22px; height: 22px; }
.gallery-nav-prev { left: 14px; }
.gallery-nav-next { right: 14px; }
.gallery-count {
  position: absolute; right: 14px; bottom: 14px; background: rgba(11,18,51,.55); color: #fff;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.detail-thumbstrip { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.detail-thumbstrip .thumb-item {
  flex: 0 0 auto; width: 96px; height: 72px; border-radius: var(--radius-sm); background: var(--bg-soft) center/cover no-repeat;
  cursor: pointer; border: 2px solid transparent; opacity: .75; transition: opacity .15s ease, border-color .15s ease;
}
.detail-thumbstrip .thumb-item:hover { opacity: 1; }
.detail-thumbstrip .thumb-item.active { opacity: 1; border-color: var(--blue-500); }
.detail-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; margin-top: 30px; align-items: start; }
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.detail-price { font-size: 30px; font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.detail-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 18px 0; }
.detail-facts div { text-align: center; }
.detail-facts strong { display: block; font-size: 18px; color: var(--navy); }
.detail-facts span { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; }
.contact-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; position: sticky; top: 90px; }
.contact-card .owner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.contact-card .owner img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--grad-brand); }
.contact-detail {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink); margin-bottom: 8px; word-break: break-all;
}
.contact-detail:hover { border-color: var(--blue-500); background: var(--bg-soft); }
.contact-detail span { flex-shrink: 0; }

.location-url { color: var(--blue-700); font-weight: 600; text-decoration: underline; word-break: break-all; }
.location-url:hover { color: var(--blue-500); }

/* ---- Dashboard / admin ---- */
.dash-layout { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
.dash-nav { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; position: sticky; top: 90px; }
.dash-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); font-weight: 500; font-size: 14px; color: var(--ink-soft); margin-bottom: 2px; }
.dash-nav a:hover, .dash-nav a.active { background: var(--bg-soft); color: var(--blue-700); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.stat-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.stat-card .num { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--navy); }
.stat-card .label { color: var(--ink-soft); font-size: 13px; }

/* Simple dependency-free bar chart for the admin stats page. */
.chart-bars {
  display: flex; align-items: flex-end; gap: 6px; height: 220px; padding: 16px 8px 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto;
}
.chart-bar-col { flex: 1; min-width: 34px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.chart-bar-fill { width: 100%; background: var(--grad-brand); border-radius: 4px 4px 0 0; min-height: 3px; transition: height .2s ease; }
.chart-bar-value { font-size: 11px; font-weight: 600; color: var(--ink-soft); margin-top: 6px; }
.chart-bar-label { font-size: 10px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.data-table th { color: var(--ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.data-table tr:hover { background: var(--bg-soft); }
.table-thumb { width: 54px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--bg-soft); }
.table-actions { display: flex; gap: 6px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty-state .roofline { margin-inline: auto; }

/* ---- Footer ---- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.72); padding: 46px 0 24px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.site-footer h5 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.site-footer a { display: block; color: rgba(255,255,255,.66); font-size: 14px; padding: 4px 0; }
.site-footer a:hover { color: #fff; }
.social-links { display: flex; gap: 10px; margin-top: 16px; }
.social-links a {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  transition: background .15s ease, color .15s ease;
}
.social-links a:hover { background: rgba(255,255,255,.18); color: #fff; }
.social-links svg { width: 17px; height: 17px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---- Toast ---- */
#toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--navy); color: #fff; padding: 13px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 14px; min-width: 240px; animation: toast-in .2s ease; }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; }
.spinner.dark { border-color: rgba(11,18,51,.2); border-top-color: var(--blue-700); }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   Responsive: tablet & mobile
   ========================================================= */
@media (max-width: 1024px) {
  .listing-grid, .category-grid { grid-template-columns: repeat(2, 1fr); }
  .listings-layout, .detail-layout, .dash-layout { grid-template-columns: 1fr; }
  .dash-nav { position: static; }
  .search-grid { grid-template-columns: repeat(2, 1fr); }
  .search-grid .btn { grid-column: span 2; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  /* Filters collapse into a toggleable panel instead of always sitting
     above the results and pushing every listing below the fold. */
  .filter-toggle-btn { display: inline-flex; }
  .filters-panel {
    position: fixed; inset: 0 20% 0 0; z-index: 200; top: 0; left: -100%; height: 100vh; width: 85%; max-width: 340px;
    background: #fff; border-radius: 0; overflow-y: auto; padding: 20px; transition: left .25s ease; box-shadow: var(--shadow-lg);
  }
  .filters-panel.open { left: 0; }
  .filters-panel-close {
    display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; color: var(--navy);
    padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
  }
  .filters-panel-close button { border: none; background: var(--bg-soft); border-radius: 50%; width: 30px; height: 30px; font-size: 15px; color: var(--ink-soft); }
  .filters-backdrop.open {
    display: block; position: fixed; inset: 0; z-index: 199; background: rgba(11,18,51,.45);
  }
}

@media (max-width: 768px) {
  .listing-grid.view-list .listing-card { flex-direction: column; }
  .listing-grid.view-list .listing-thumb { flex: none; aspect-ratio: 4/3; }
  .homepage-banner { max-width: none; }
  .homepage-banner img { height: 70px; }
  .cta-banner { flex-direction: column; align-items: stretch; text-align: center; padding: 28px 22px; }
  .cta-banner .btn-primary { width: 100%; }
  .nav-links { position: fixed; top: 72px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; padding: 10px; display: none; box-shadow: var(--shadow-md); }
  .nav-links.open { display: flex; }
  .nav-post-link { display: block; }
  .nav-toggle { display: block; }
  .post-btn-desktop { display: none; }
  .listing-grid, .category-grid { grid-template-columns: 1fr; }
  .search-grid { grid-template-columns: 1fr; }
  .search-grid .btn { grid-column: span 1; }
  .detail-gallery .main-img { height: 260px; }
  .gallery-nav { width: 36px; height: 36px; }
  .gallery-nav svg { width: 18px; height: 18px; }
  .detail-thumbstrip .thumb-item { width: 76px; height: 58px; }
  .detail-facts { grid-template-columns: repeat(2, 1fr); }
  .wizard-steps .step span.label { display: none; }
  .grid-2, .grid-3, .type-picker { grid-template-columns: 1fr 1fr; }
  .image-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 32px 0; }
  .search-card { margin-top: -24px; }
  .section { padding: 40px 0; }
}

@media (max-width: 480px) {
  .type-picker, .grid-3 { grid-template-columns: 1fr; }
  .contact-card, .filters-panel { position: static; }
}

/* Honeypot field for spam bots: kept in the layout and visible to screen
   readers as "do not fill in" rather than display:none, since bots that
   scrape forms often specifically skip fields hidden that way. */
.hp-field {
  position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden;
}