/* BuyNadlan reusable components: project / apartment cards, filter chips, map.
   All classes are prefixed bn-. Tokens are scoped as --bn-* so they never clash with page CSS. */
:root{
  --bn-navy:#1d2a3c;
  --bn-navy-2:#2b3b52;
  --bn-slate:#8a99ab;
  --bn-slate-soft:#c9d1da;
  --bn-cream:#ebe6dc;
  --bn-cream-2:#f4f1ec;
  --bn-card:#fff;
  --bn-ink:#1d2a3c;
  --bn-muted:#5f6c7c;
  --bn-line:#dde2e8;
  --bn-ok:#2f7d5b;
  --bn-r-lg:22px; --bn-r-md:14px; --bn-r-sm:10px;
  --bn-font:"Heebo","Assistant","Rubik",Arial,"Segoe UI",sans-serif;
}

/* ---------- filters ---------- */
.bn-filters{display:flex;flex-direction:column;gap:10px;font-family:var(--bn-font);color:var(--bn-ink)}
.bn-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bn-chips-lbl{font-size:12.5px;color:var(--bn-muted);margin-inline-end:2px;min-width:3.2em}
.bn-chip{border:1px solid var(--bn-line);background:#fff;color:var(--bn-ink);border-radius:999px;
  padding:6px 13px;font:inherit;font-size:13.5px;line-height:1.3;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.bn-chip:hover{border-color:var(--bn-navy)}
.bn-chip[aria-pressed="true"]{background:var(--bn-navy);border-color:var(--bn-navy);color:#fff}
.bn-count{font-size:14px;color:var(--bn-muted);margin:2px 0 0}
.bn-count b{color:var(--bn-ink);font-weight:700}

/* ---------- grid ---------- */
.bn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;font-family:var(--bn-font)}
.bn-empty{grid-column:1/-1;text-align:center;color:var(--bn-muted);padding:40px 0}

/* ---------- card (shared by project + apartment) ---------- */
.bn-card{background:var(--bn-card);border:1px solid var(--bn-line);border-radius:var(--bn-r-lg);overflow:hidden;
  display:flex;flex-direction:column;font-family:var(--bn-font);color:var(--bn-ink);line-height:1.5;
  transition:transform .15s,box-shadow .15s,border-color .15s;position:relative}
.bn-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(29,42,60,.10)}
.bn-card.is-active{border-color:var(--bn-navy);box-shadow:0 0 0 2px var(--bn-navy),0 10px 28px rgba(29,42,60,.12)}
.bn-cover{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--bn-navy),var(--bn-navy-2));overflow:hidden}
.bn-cover img{width:100%;height:100%;object-fit:cover;display:block}
.bn-cover-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:30px;font-weight:800;letter-spacing:.02em;opacity:.9;padding:0 16px;text-align:center}
.bn-dev{position:absolute;top:10px;inset-inline-start:10px;background:rgba(255,255,255,.92);color:var(--bn-navy);
  font-size:12px;font-weight:500;border-radius:999px;padding:4px 10px;line-height:1.4}
.bn-score{position:absolute;top:10px;inset-inline-end:10px;background:var(--bn-ok);color:#fff;font-size:12.5px;
  font-weight:700;border-radius:999px;padding:4px 10px;line-height:1.4}
.bn-score[hidden]{display:none}
.bn-body{padding:14px 16px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.bn-name{font-size:17px;font-weight:700;margin:0;line-height:1.3}
.bn-addr{color:var(--bn-muted);font-size:13.5px;margin:0}
.bn-meta{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.bn-meta li{background:var(--bn-cream-2);border-radius:999px;padding:3px 10px;font-size:12.5px;color:var(--bn-navy)}
.bn-num{unicode-bidi:isolate;direction:ltr;display:inline-block}
.bn-tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.bn-tags li{border:1px solid var(--bn-line);border-radius:999px;padding:2px 9px;font-size:12px;color:var(--bn-muted)}
.bn-price{font-size:16px;font-weight:700;margin:4px 0 0}
.bn-price.is-na{font-size:13.5px;font-weight:400;color:var(--bn-muted)}
.bn-actions{display:flex;gap:8px;margin-top:auto;padding-top:10px}
.bn-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bn-navy);
  background:var(--bn-navy);color:#fff;border-radius:999px;padding:9px 12px;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;text-align:center;text-decoration:none;transition:filter .15s}
.bn-btn:hover{filter:brightness(1.12)}
.bn-btn.bn-ghost{background:#fff;color:var(--bn-navy)}
.bn-btn.bn-ghost:hover{filter:none;background:var(--bn-cream-2)}

/* apartment card: compact navy header instead of a photo */
.bn-apt-head{position:relative;background:linear-gradient(135deg,var(--bn-navy),var(--bn-navy-2));color:#fff;
  padding:14px 16px 12px;min-height:64px}
.bn-apt-head .bn-dev{position:static;display:inline-block}
.bn-apt-head .bn-score{top:12px}
.bn-apt-model{display:block;font-size:13px;opacity:.85;margin-top:6px}

/* ---------- map ---------- */
.bn-map{direction:ltr;min-height:320px;border-radius:var(--bn-r-lg);overflow:hidden;border:1px solid var(--bn-line);
  background:var(--bn-cream-2);z-index:0}
.bn-map .leaflet-control-attribution{font-family:var(--bn-font);font-size:11px}
.bn-marker{background:none;border:0}
.bn-pin{display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--bn-navy);border:3px solid #fff;box-shadow:0 2px 8px rgba(29,42,60,.35);transition:transform .15s,background .15s}
.bn-marker.is-active .bn-pin{background:var(--bn-ok);transform:rotate(-45deg) scale(1.3)}
.bn-marker.is-active{z-index:1000 !important}
.bn-pop .leaflet-popup-content-wrapper{border-radius:var(--bn-r-md);padding:0}
.bn-pop .leaflet-popup-content{margin:0;width:220px !important}
.bn-mini{direction:rtl;text-align:right;font-family:var(--bn-font);color:var(--bn-ink);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.bn-mini .bn-name{font-size:15px}
.bn-mini .bn-addr{font-size:12.5px}
.bn-mini .bn-meta li{font-size:12px}
.bn-mini .bn-btn{margin-top:6px;padding:7px 10px;font-size:13px;color:#fff}

@media (max-width:600px){
  .bn-grid{grid-template-columns:1fr}
  .bn-map{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  .bn-card,.bn-pin,.bn-chip{transition:none}
  .bn-card:hover{transform:none}
}