*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --or:#F26522;--or-d:#d9531a;--or-pale:#fff4ee;--or-glow:rgba(242,101,34,.15);
  --text:#1a1208;--muted:#7a6e65;--border:#e8ddd4;--cream:#fdf8f4;--white:#fff;
  --navy:#1a2744;--green:#16a34a;--green-pale:#f0fdf4;--radius:12px;
  --sidebar:280px;
}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;color:var(--text);background:var(--cream);overflow-x:hidden}

/* ── TOPBAR ── */

.topbar a{color:#ffd580;text-decoration:none;font-weight:600}

/* ── NAVBAR ── */

.nb-brand span{color:var(--or)}
.nb-search{flex:1;max-width:480px;margin:0 20px;display:flex;align-items:center;background:#f5f0eb;border-radius:50px;border:1.5px solid var(--border);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.nb-search:focus-within{border-color:var(--or);box-shadow:0 0 0 3px var(--or-glow)}
.nb-search input{flex:1;border:none;background:transparent;padding:9px 16px;font-family:'Outfit',sans-serif;font-size:.88rem;outline:none;color:var(--text)}
.nb-search button{background:var(--or);border:none;padding:9px 18px;color:#fff;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}

/* floating post property button */

/* ── BREADCRUMB ── */
.breadcrumb{padding:10px 24px;font-size:.78rem;color:var(--muted);background:var(--white);border-bottom:1px solid var(--border)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--or)}
.breadcrumb span{color:var(--text);font-weight:600}

/* ── FILTER BAR ── */
.filter-bar{background:var(--white);border-bottom:1px solid var(--border);padding:10px 24px;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;position:sticky;top:58px;z-index:200}
.filter-bar::-webkit-scrollbar{display:none}
.filter-chip{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:50px;border:1.5px solid var(--border);background:var(--white);font-size:.78rem;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0}
.filter-chip:hover{border-color:var(--or);color:var(--or)}
.filter-chip.active{background:var(--or);border-color:var(--or);color:#fff}
.filter-chip .chip-icon{font-size:.85rem}
.filter-sep{width:1px;height:20px;background:var(--border);flex-shrink:0}
.sort-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:50px;border:1.5px solid var(--border);background:var(--white);font-size:.78rem;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap;margin-left:auto;flex-shrink:0}
.sort-btn:hover{border-color:var(--or);color:var(--or)}

/* ── LAYOUT ── */
.page-layout{display:flex;min-height:calc(100vh - 120px)}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar);flex-shrink:0;
  background:var(--white);border-right:1px solid var(--border);
  padding:20px 16px;
  height:calc(100vh - 120px);
  overflow-y:auto;
  position:sticky;top:120px;
  scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.sb-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.sb-section:last-child{border-bottom:none}
.sb-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.sb-title button{font-size:.72rem;color:var(--or);background:none;border:none;cursor:pointer;font-family:'Outfit',sans-serif;font-weight:600}

.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.toggle-label{font-size:.85rem;font-weight:500;color:var(--text)}
.toggle{position:relative;width:40px;height:22px;cursor:pointer}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:#e2d9d0;border-radius:50px;transition:.3s}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle input:checked + .toggle-slider{background:var(--or)}
.toggle input:checked + .toggle-slider::before{transform:translateX(18px)}

.range-row{display:flex;gap:8px}
.range-input{flex:1;padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-family:'Outfit',sans-serif;font-size:.8rem;color:var(--text);outline:none;background:#fafaf8}
.range-input:focus{border-color:var(--or)}

.checkbox-list{display:flex;flex-direction:column;gap:8px}
.checkbox-item{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.85rem;color:var(--text)}
.checkbox-item input{width:16px;height:16px;accent-color:var(--or);cursor:pointer}
.checkbox-item span{color:var(--muted);font-size:.78rem;margin-left:auto}

.price-slider{width:100%;margin-top:8px;accent-color:var(--or)}

/* ── MAIN CONTENT ── */
.main-content{flex:1;padding:20px 20px 40px;min-width:0}

/* results header */
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.results-count{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700}
.results-count span{color:var(--or)}
.insights-pill{display:flex;align-items:center;gap:6px;background:var(--or-pale);color:var(--or);font-size:.75rem;font-weight:600;padding:5px 12px;border-radius:50px;cursor:pointer;border:none;font-family:'Outfit',sans-serif}

/* ── PROPERTY CARD (list view) ── */
.prop-list{display:flex;flex-direction:column;gap:16px}

.prop-card{
  background:var(--white);border-radius:16px;
  border:1.5px solid var(--border);
  overflow:hidden;display:flex;
  transition:all .25s;cursor:pointer;
  position:relative;
}
.prop-card:hover{border-color:var(--or);box-shadow:0 8px 32px rgba(0,0,0,.09);transform:translateY(-2px)}

.prop-card-img{
  width:260px;flex-shrink:0;position:relative;overflow:hidden;
}
.prop-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.prop-card:hover .prop-card-img img{transform:scale(1.05)}
.prop-img-badge{
  position:absolute;top:10px;left:10px;
  background:rgba(0,0,0,.65);color:#fff;
  font-size:.68rem;font-weight:700;
  padding:3px 8px;border-radius:50px;
  display:flex;align-items:center;gap:4px;
}
.prop-img-count{
  position:absolute;bottom:10px;right:10px;
  background:rgba(0,0,0,.6);color:#fff;
  font-size:.7rem;padding:3px 8px;border-radius:50px;
}
.prop-save{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;cursor:pointer;border:none;
  transition:all .2s;
}
.prop-save:hover{background:var(--or);color:#fff}

.prop-card-body{flex:1;padding:16px 20px;display:flex;flex-direction:column;min-width:0}

.prop-dev-badge{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.dev-logo{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--or),#ff9a56);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:800;flex-shrink:0}
.dev-name{font-size:.75rem;color:var(--muted);font-weight:500}
.dev-verified{color:var(--green);font-size:.72rem;font-weight:600;display:flex;align-items:center;gap:3px}

.prop-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:700;margin-bottom:4px;line-height:1.2}
.prop-type{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.prop-price-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.prop-price{font-size:1.1rem;font-weight:700;color:var(--text)}
.prop-price-range{font-size:.8rem;color:var(--muted)}
.prop-status{font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:50px}
.status-ready{background:var(--green-pale);color:var(--green)}
.status-construction{background:#fef9c3;color:#854d0e}

.prop-specs{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.spec-item{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted)}
.spec-item strong{color:var(--text);font-weight:600}
.spec-icon{font-size:.85rem}

.prop-usps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.usp-tag{font-size:.68rem;background:var(--cream);border:1px solid var(--border);padding:3px 8px;border-radius:6px;color:var(--muted);white-space:nowrap}
.usp-tag.highlight{background:var(--or-pale);border-color:rgba(242,101,34,.3);color:var(--or)}

.prop-card-
.prop-dev-info{display:flex;align-items:center;gap:8px}
.prop-dev-avatar{width:32px;height:32px;border-radius:8px;background:var(--cream);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--or);flex-shrink:0}
.prop-dev-role{font-size:.7rem;color:var(--muted)}
.prop-dev-title{font-size:.78rem;font-weight:600}
.prop-actions{display:flex;gap:8px}
.btn-contact{padding:8px 16px;border-radius:50px;border:1.5px solid var(--or);background:transparent;color:var(--or);font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s}
.btn-contact:hover{background:var(--or);color:#fff}
.btn-wa{padding:8px 16px;border-radius:50px;border:1.5px solid #25d366;background:transparent;color:#25d366;font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s}
.btn-wa:hover{background:#25d366;color:#fff}
.prop-ad-tag{position:absolute;top:10px;left:10px;background:var(--navy);color:#fff;font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:4px}

/* ── SECTION DIVIDER CARDS ── */
.section-banner{background:var(--white);border-radius:16px;border:1.5px solid var(--border);padding:18px 20px;margin:20px 0}
.section-banner-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.section-banner-sub{font-size:.78rem;color:var(--muted);margin-bottom:14px}

/* mini cards slider */
.mini-slider{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.mini-slider::-webkit-scrollbar{display:none}
.mini-card{flex:0 0 180px;border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative;transition:transform .2s,box-shadow .2s}
.mini-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.12)}
.mini-card img{width:100%;height:120px;object-fit:cover;display:block}
.mini-card-body{padding:10px 10px 12px;background:var(--white);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius)}
.mini-card-name{font-size:.82rem;font-weight:700;margin-bottom:2px}
.mini-card-type{font-size:.72rem;color:var(--muted);margin-bottom:4px}
.mini-card-price{font-size:.78rem;font-weight:700;color:var(--or)}

/* circle cards (In & Around) */
.circle-slider{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.circle-slider::-webkit-scrollbar{display:none}
.circle-card{flex:0 0 140px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.circle-img-wrap{width:110px;height:110px;border-radius:50%;overflow:hidden;border:3px solid var(--border);transition:border-color .2s,box-shadow .2s}
.circle-card:hover .circle-img-wrap{border-color:var(--or);box-shadow:0 0 0 4px var(--or-glow)}
.circle-img-wrap img{width:100%;height:100%;object-fit:cover}
.circle-badge{background:var(--or);color:#fff;font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:50px;margin-top:-12px;position:relative;z-index:1}
.circle-name{font-size:.82rem;font-weight:700;text-align:center}
.circle-loc{font-size:.7rem;color:var(--muted);text-align:center}
.circle-price{font-size:.75rem;font-weight:700;color:var(--or);text-align:center}

/* reel mini */
.reel-mini{flex:0 0 100px;height:150px;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;transition:transform .2s}
.reel-mini:hover{transform:scale(1.05)}
.reel-mini img{width:100%;height:100%;object-fit:cover}
.reel-mini .reel-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.reel-mini .reel-play-sm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:var(--or);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem}

/* luxury picks */
.luxury-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.lux-card{border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .22s;border:1.5px solid var(--border)}
.lux-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.1);border-color:var(--or)}
.lux-card img{width:100%;height:120px;object-fit:cover}
.lux-card-body{padding:10px;background:var(--white)}
.lux-dev{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.lux-dev-icon{width:20px;height:20px;border-radius:50%;background:var(--or-pale);display:flex;align-items:center;justify-content:center;font-size:.6rem}
.lux-dev-name{font-size:.7rem;color:var(--muted)}
.lux-name{font-size:.82rem;font-weight:700;margin-bottom:2px}
.lux-type{font-size:.7rem;color:var(--muted)}
.lux-price{font-size:.8rem;font-weight:700;color:var(--or);margin-top:4px}

/* pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.page-btn{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--border);background:var(--white);font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--text)}
.page-btn:hover{border-color:var(--or);color:var(--or)}
.page-btn.active{background:var(--or);border-color:var(--or);color:#fff}
.page-btn.dots{border:none;background:none;cursor:default}

/* ── MOBILE BOTTOM NAV ── */

/* mobile filter drawer */
.mob-filter-btn{display:none;position:fixed;bottom:76px;right:80px;z-index:400;background:var(--or);color:#fff;border:none;border-radius:50px;padding:12px 20px;font-family:'Outfit',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;box-shadow:0 6px 20px var(--or-glow);align-items:center;gap:6px}

/* ── RESPONSIVE ── */

/* ── APP-STYLE BOTTOM NAV (matches home page) ── */

/* raised center Post button */

/* ══════════════════════════════════════════════
   RESPONSIVE — PropertySearch (Mobile App Style)
══════════════════════════════════════════════ */

/* ── Tablet ≤1024px ── */
@media(max-width:1024px){
  :root{--sidebar:220px}
  .prop-card-img{width:200px}
  .luxury-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── Mobile ≤768px ── */
@media(max-width:768px){

  /* layout */
  .page-layout{flex-direction:column}
  .sidebar{display:none}
  .main-content{padding:8px 12px 90px;min-width:0}

  /* topbar */
  .topbar{padding:5px 12px;font-size:.7rem}
  .topbar span:last-child{display:none}

  /* navbar */
  .navbar{padding:0 12px;height:56px;gap:8px}
  .nb-links{display:none}
  .nb-search{max-width:none;flex:1}
  .nb-search input{font-size:.82rem}
  .nb-right .nb-link{display:none}

  /* breadcrumb */
  .breadcrumb{padding:8px 12px;font-size:.72rem;white-space:nowrap;overflow-x:auto}

  /* filter bar */
  .filter-bar{
    top:56px;padding:8px 10px;gap:6px;
    overflow-x:auto;scrollbar-width:none;
    flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
  }
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-chip{padding:6px 10px;font-size:.72rem;white-space:nowrap;flex-shrink:0}
  .filter-sep{display:none}
  .sort-btn{flex-shrink:0;font-size:.72rem;padding:6px 10px}

  /* results header */
  .results-header{flex-direction:column;align-items:flex-start;gap:8px;padding:0 2px}
  .results-count{font-size:.95rem}
  .insights-pill{font-size:.72rem;padding:6px 12px}

  /* property card — vertical stack like app */
  .prop-card{
    flex-direction:column;
    border-radius:14px;
    margin-bottom:12px;
    overflow:hidden;
  }
  .prop-card-img{
    width:100%;height:210px;
    border-radius:0;
  }
  .prop-card-img img{border-radius:0}
  .prop-card-body{padding:12px 14px 14px}
  .prop-ad-tag{top:8px;right:8px;font-size:.62rem;padding:2px 7px}
  .prop-img-count{bottom:10px;left:10px;font-size:.72rem;padding:3px 8px}
  .prop-save{top:10px;right:10px;width:34px;height:34px;font-size:.9rem}

  /* card body elements */
  .prop-dev-badge{margin-bottom:8px}
  .dev-logo{width:28px;height:28px;font-size:.65rem}
  .dev-name{font-size:.72rem}
  .prop-name{font-size:1rem;margin-bottom:3px}
  .prop-type{font-size:.75rem;margin-bottom:6px}
  .prop-price-row{flex-wrap:wrap;gap:6px;margin-bottom:8px}
  .prop-price{font-size:1rem}
  .prop-status{font-size:.68rem;padding:3px 8px}
  .prop-specs{gap:8px;flex-wrap:wrap;margin-bottom:8px}
  .spec-item{font-size:.75rem}
  .prop-usps{gap:5px;flex-wrap:wrap;margin-bottom:10px}
  .usp-tag{font-size:.68rem;padding:3px 8px}

  /* card footer */
  .prop-card-footer{flex-direction:column;gap:10px}
  .prop-dev-info{font-size:.75rem}
  .prop-dev-avatar{width:28px;height:28px;font-size:.7rem}
  .prop-actions{width:100%;display:flex;gap:8px}
  .btn-contact,.btn-wa{
    flex:1;justify-content:center;
    font-size:.78rem;padding:10px 8px;
    border-radius:10px;
  }

  /* section banners */
  .section-banner{padding:14px;margin:8px 0}
  .section-banner-title{font-size:.95rem}
  .section-banner-sub{font-size:.75rem}

  /* luxury grid */
  .luxury-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .lux-card{border-radius:10px}
  .lux-card img{height:110px}
  .lux-name{font-size:.8rem}
  .lux-price{font-size:.82rem}

  /* mini cards slider */
  .mini-card{flex:0 0 150px}
  .mini-card img{height:90px}

  /* circle cards */
  .circle-card{flex:0 0 100px}
  .circle-img-wrap{width:80px;height:80px}
  .circle-label{font-size:.7rem}

  /* reel strip */
  .reel-mini{flex:0 0 90px;height:130px}

  /* filter button */
  .mob-filter-btn{display:flex;bottom:80px;left:16px;right:auto}

  /* pagination */
  .pagination{margin-top:16px;gap:4px;justify-content:center}
  .page-btn{width:34px;height:34px;font-size:.8rem}
  .page-btn.dots{display:none}
}

/* ── Small phone ≤480px ── */
@media(max-width:480px){
  .nb-search{max-width:none}
  .prop-card-img{height:185px}
  .prop-name{font-size:.95rem}
  .prop-price{font-size:.95rem}
  .luxury-grid{grid-template-columns:1fr 1fr}
  .lux-card img{height:95px}
  .main-content{padding:6px 10px 90px}
}