:root{
  --bg:#0f0d0a; --surface:#1a1712; --surface-2:#221e17; --border:#33291d;
  --clay:#c1552c; --clay-light:#e07a4e; --gold:#d4a94a; --gold-dim:#8c7238;
  --text:#f2ede1; --text-dim:#a89a82; --text-faint:#6e6455;
  --ok:#5fae72; --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Manrope',sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:'Fraunces',serif;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(15,13,10,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{font-size:22px; font-weight:700; color:var(--text); letter-spacing:.2px;}
.brand span{color:var(--clay-light);}
.header-actions{display:flex; gap:10px; align-items:center;}
.btn{
  padding:9px 18px; border-radius:999px; border:1px solid var(--border);
  background:transparent; color:var(--text); font-weight:600; font-size:14px;
  transition:.15s border-color;
}
.btn:hover{border-color:var(--gold);}
.btn-primary{
  background:var(--clay); border-color:var(--clay); color:#fff;
}
.btn-primary:hover{background:var(--clay-light); border-color:var(--clay-light);}
.user-pill{font-size:14px; color:var(--text-dim); display:none; align-items:center; gap:10px;}

/* ---------- HERO / SEARCH ---------- */
.hero{
  padding:56px 20px 40px; text-align:center;
  background:
    radial-gradient(600px 260px at 20% -10%, rgba(193,85,44,.18), transparent),
    radial-gradient(600px 260px at 85% -20%, rgba(212,169,74,.14), transparent);
}
.hero h1{font-size:clamp(28px,4vw,42px); font-weight:600; max-width:680px; margin:0 auto 10px;}
.hero p{color:var(--text-dim); max-width:520px; margin:0 auto 28px; font-size:15px;}
.search-box{
  max-width:760px; margin:0 auto; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; display:flex; flex-wrap:wrap; gap:10px;
}
.search-box select, .search-box input{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:11px 12px; font-size:14px; font-family:inherit;
}
.search-box select{flex:1 1 140px;}
.search-box input[type="text"]{flex:2 1 200px;}
.search-box input[type="number"]{flex:1 1 110px;}
.search-box .btn-primary{flex:0 0 auto; padding:11px 24px;}

/* ---------- SECTION ---------- */
.section{max-width:1200px; margin:0 auto; padding:36px 20px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:12px;}
.section-head h2{font-size:22px; font-weight:600;}
.section-head .muted{color:var(--text-faint); font-size:13px;}

/* ---------- CATEGORY MENU ---------- */
#categoryMenu{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;
}
.cat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; transition:.15s border-color, .15s transform;
}
.cat-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.cat-icon{font-size:26px; margin-bottom:8px;}
.cat-title{font-weight:700; margin-bottom:10px; font-size:15px;}
.cat-stats{display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--text-dim);}
.cat-stats b{color:var(--gold);}

/* ---------- FILTER BAR ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}

/* ---------- LISTINGS GRID ---------- */
.listings-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;}
.listing-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; transition:.15s border-color;
}
.listing-card:hover{border-color:var(--gold);}
.listing-photo{
  aspect-ratio:4/3; background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); font-size:13px; position:relative; overflow:hidden;
}
.listing-photo img{width:100%; height:100%; object-fit:cover;}
.listing-badge{
  position:absolute; top:10px; left:10px; background:rgba(15,13,10,.8);
  padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; color:var(--gold);
}
.listing-body{padding:14px;}
.listing-price{font-size:18px; font-weight:700; color:var(--gold); margin-bottom:4px;}
.listing-title{font-size:14.5px; font-weight:600; margin-bottom:4px;}
.listing-meta{font-size:12.5px; color:var(--text-dim); display:flex; gap:8px; flex-wrap:wrap;}
.empty-state{
  text-align:center; padding:48px 20px; color:var(--text-faint); font-size:14px;
  grid-column:1/-1;
}
.realtor-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; text-align:center;
}
.realtor-photo{
  width:76px; height:76px; border-radius:50%; margin:0 auto 12px; overflow:hidden;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:28px;
}
.realtor-photo img{width:100%; height:100%; object-fit:cover;}
.realtor-name{font-weight:700; font-size:15px; margin-bottom:4px;}
.realtor-exp{color:var(--gold); font-size:12.5px; margin-bottom:8px;}
.realtor-phone{color:var(--text-dim); font-size:12.5px;}

/* ---------- MODALS ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; z-index:100;
  padding:40px 16px; overflow-y:auto;
}
.overlay.open{display:flex;}
.modal{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  max-width:520px; width:100%; padding:26px; position:relative;
}
.modal-close{
  position:absolute; top:16px; right:16px; background:none; border:none;
  color:var(--text-dim); font-size:20px; line-height:1;
}
.modal h3{font-size:19px; margin-bottom:18px; font-weight:600;}
.form-row{margin-bottom:12px;}
.form-row label{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:5px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit;
}
.form-row textarea{min-height:80px; resize:vertical;}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.form-error{color:#e07a4e; font-size:13px; margin-bottom:10px; display:none;}
.form-error.show{display:block;}
.tab-switch{display:flex; gap:6px; margin-bottom:18px; background:var(--surface-2); border-radius:10px; padding:4px;}
.tab-switch button{flex:1; padding:8px; border:none; background:none; border-radius:8px; color:var(--text-dim); font-weight:600; font-size:13.5px;}
.tab-switch button.active{background:var(--clay); color:#fff;}
.photo-input-note{font-size:12px; color:var(--text-faint); margin-top:4px;}

.detail-photos{display:flex; gap:8px; overflow-x:auto; margin-bottom:16px;}
.detail-photos img{width:140px; height:105px; object-fit:cover; border-radius:10px; flex:0 0 auto;}
.detail-price{font-size:24px; font-weight:700; color:var(--gold); margin-bottom:6px;}
.detail-meta{color:var(--text-dim); font-size:14px; margin-bottom:14px;}
.detail-desc{font-size:14px; color:var(--text); margin-bottom:16px; white-space:pre-wrap;}
.detail-phone{
  display:inline-block; background:var(--clay); color:#fff; padding:11px 22px;
  border-radius:999px; font-weight:700; font-size:14.5px;
}

footer{border-top:1px solid var(--border); padding:26px 20px; text-align:center; color:var(--text-faint); font-size:13px;}

@media(max-width:640px){
  .form-grid-2{grid-template-columns:1fr;}
  .hero{padding:40px 16px 30px;}
}

/* ---------- LISTING DETAIL PAGE (listing.php) ---------- */
.breadcrumb{color:var(--text-faint); font-size:13px; margin-bottom:16px;}
.breadcrumb a{color:var(--text-dim);}
.gallery{margin-bottom:20px; border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.gallery-main{width:100%; aspect-ratio:16/10; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--text-faint); overflow:hidden;}
.gallery-main img{width:100%; height:100%; object-fit:cover;}
.gallery-thumbs{display:flex; gap:6px; padding:8px; overflow-x:auto;}
.gallery-thumbs img{width:64px; height:48px; object-fit:cover; border-radius:6px; cursor:pointer; opacity:.6; flex:0 0 auto;}
.gallery-thumbs img.active{opacity:1; outline:2px solid var(--gold);}

.ld-price{font-size:28px; font-weight:700; color:var(--gold); margin-bottom:4px;}
.ld-price small{font-size:15px; color:var(--text-dim); font-weight:500;}
.ld-title{font-size:20px; font-weight:600; margin-bottom:10px;}
.ld-facts{display:flex; gap:18px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:16px;}
.ld-fact{text-align:center;}
.ld-fact b{display:block; font-size:16px; color:var(--text);}
.ld-fact span{font-size:12px; color:var(--text-faint);}
.ld-address{color:var(--text-dim); font-size:14px; margin-bottom:18px;}

.ld-section{margin-bottom:24px;}
.ld-section h3{font-size:16px; font-weight:600; margin-bottom:12px;}
.ld-table{width:100%; border-collapse:collapse;}
.ld-table tr{border-bottom:1px solid var(--border);}
.ld-table td{padding:9px 0; font-size:13.5px;}
.ld-table td:first-child{color:var(--text-faint); width:50%;}
.ld-table td:last-child{color:var(--text); font-weight:500;}

.ld-map{border-radius:var(--radius); overflow:hidden; margin-bottom:20px;}
.ld-desc{white-space:pre-wrap; font-size:14px; color:var(--text); line-height:1.65;}

.seller-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.seller-avatar{
  width:52px; height:52px; border-radius:50%; background:var(--clay); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; flex:0 0 auto;
}
.seller-info{flex:1;}
.seller-name{font-weight:700; font-size:15px;}
.seller-role{color:var(--text-faint); font-size:12.5px;}

.related-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;}

@media(max-width:640px){
  .ld-facts{gap:12px;}
}