/* ═══════════════════════════════════════════════════════════════════════
   Bookingo — /brokers three-panel directory
   left sidebar (dark) · listing (light) · live chat (light)
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#10201A; --ink-2:#10201A; --ink-3:#10201A; --line-d:rgba(255,255,255,.08);
  --paper:#F4F7F5; --card:#FFFFFF; --line:#E2EAE5; --txt:#10201A; --muted:#5A6962; --muted-2:#8A968F;
  --red:#16833F; --red-2:#16833F; --red-soft:rgba(22,131,63,.14);
  --green:#1E9E52; --green-soft:#E8F7EE; --blue:#2563EB; --blue-soft:#EAF1FF; --wa:#25D366; --wa-soft:#E9F9F0;
  --r:14px; --r-sm:8px; --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06);
  --side:244px; --chat:388px; --top:72px;
}
*{box-sizing:border-box} html{height:100%} body{margin:0; min-height:100%} [hidden]{display:none!important}
body.bk{font-family:Inter,"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--txt); background:var(--paper);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.45}
a{color:inherit; text-decoration:none} button{font:inherit; cursor:pointer}
.ic{width:18px; height:18px; flex:none} .ic-lg{width:34px; height:34px} .ic-caret{width:16px; height:16px}
h1,h2,h3,h4{margin:0; letter-spacing:-.01em}

/* ── top bar ───────────────────────────────────────────────────────── */
.bk-top{position:sticky; top:0; z-index:40; height:var(--top); background:var(--ink); color:#fff; display:grid;
  grid-template-columns:var(--side) 1fr auto; align-items:center; gap:20px; padding:0 20px 0 0; border-bottom:1px solid var(--line-d)}
.bk-brand{display:flex; align-items:center; gap:12px; padding:0 20px; height:100%; border-right:1px solid var(--line-d)}
.bk-logo{width:40px; height:40px; flex:none}
.bk-brand-t{display:flex; flex-direction:column; line-height:1.05}
.bk-brand-t b{font-size:22px; font-weight:800; letter-spacing:-.02em} .bk-brand-t small{font-size:11.5px; color:#AEB9B2; margin-top:3px}
.bk-burger{display:none; background:none; border:0; color:#fff; padding:8px}
.bk-search{display:flex; align-items:center; gap:10px; height:46px; max-width:540px; width:100%; background:var(--ink-3); border:1px solid var(--line-d);
  border-radius:12px; padding:0 14px; color:#8A968F}
.bk-search input{flex:1; background:none; border:0; outline:0; color:#fff; font-size:14.5px} .bk-search input::placeholder{color:#8A968F}
.bk-top-r{display:flex; align-items:center; gap:14px}
.bk-em{position:relative}
.bk-em-btn,.bk-sort-btn{display:flex; align-items:center; gap:9px; height:46px; padding:0 14px 0 12px; background:var(--ink-3); border:1px solid var(--line-d);
  border-radius:12px; color:#fff; font-weight:600; font-size:15px; min-width:172px}
.bk-em-btn .ic{color:var(--red)} .bk-em-btn span{flex:1; text-align:left}
.bk-em-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:#fff; color:var(--txt); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.25);
  padding:6px; z-index:50}
.bk-em-menu a{display:block; padding:10px 12px; border-radius:8px; font-weight:500} .bk-em-menu a:hover{background:var(--paper)} .bk-em-menu a.is-on{background:var(--red-soft); color:var(--red); font-weight:700}
.bk-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border-radius:12px; font-weight:700; font-size:15px; border:1px solid transparent; white-space:nowrap}
.bk-btn--ghost{background:var(--ink-3); border-color:var(--line-d); color:#fff}
.bk-btn--red{background:var(--red); color:#fff} .bk-btn--red:hover{background:var(--red-2)}

/* ── layout ────────────────────────────────────────────────────────── */
.bk-body{display:grid; grid-template-columns:var(--side) minmax(0,1fr) var(--chat); min-height:calc(100vh - var(--top))}

/* ── left sidebar ──────────────────────────────────────────────────── */
.bk-side{background:var(--ink); color:#fff; padding:16px 12px 24px; border-right:1px solid var(--line-d); position:sticky; top:var(--top); height:calc(100vh - var(--top)); overflow:auto}
.bk-nav{display:flex; flex-direction:column; gap:4px; padding-bottom:18px; border-bottom:1px solid var(--line-d); margin-bottom:16px}
.bk-nav a{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; font-weight:600; color:#E2EAE5; font-size:15px}
.bk-nav a .ic{color:#AEB9B2} .bk-nav a:hover{background:var(--ink-3)}
.bk-nav a.is-on{background:linear-gradient(90deg,#0F5A2B,#0F5A2B); border:1px solid rgba(22,131,63,.5); color:#fff} .bk-nav a.is-on .ic{color:#22A94A}
.fl-head{display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:.08em; color:#8A968F; font-weight:700; padding:2px 8px 10px}
.fl-clear{color:#22A94A; font-size:12px; letter-spacing:0; text-transform:none}
.fl{border-top:1px solid var(--line-d)} .fl summary{list-style:none; display:flex; justify-content:space-between; align-items:center; padding:13px 8px; font-weight:600; font-size:15px; cursor:pointer}
.fl summary::-webkit-details-marker{display:none} .fl-caret{transition:transform .2s; color:#8A968F} .fl[open] .fl-caret{transform:rotate(180deg)}
.fl-body{padding:0 8px 12px}
.fl-search{display:flex; align-items:center; gap:8px; background:var(--ink-3); border:1px solid var(--line-d); border-radius:10px; padding:0 12px; height:40px; color:#8A968F; margin-bottom:8px}
.fl-search input{flex:1; background:none; border:0; outline:0; color:#fff; font-size:14px} .fl-search input::placeholder{color:#8A968F}
.fl-list{display:flex; flex-direction:column; gap:2px}
.fl-opt{display:flex; align-items:center; gap:10px; padding:7px 4px; border-radius:8px; cursor:pointer; font-size:14.5px; color:#E2EAE5}
.fl-opt:hover{background:var(--ink-3)} .fl-opt input{position:absolute; opacity:0; pointer-events:none}
.fl-box{width:18px; height:18px; border-radius:5px; border:1.5px solid #5A6962; background:#fff; flex:none; position:relative}
.fl-opt.is-on .fl-box{background:var(--red); border-color:var(--red)}
.fl-opt.is-on .fl-box::after{content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.fl-lab{flex:1; display:flex; align-items:center; gap:7px} .fl-flag{font-size:15px} .fl-n{color:#8A968F; font-size:13px; font-variant-numeric:tabular-nums}
.fl-opt.is-zero{opacity:.45}
.fl-more{background:none; border:0; color:#AEB9B2; font-size:13.5px; padding:8px 4px 0; display:flex; align-items:center; gap:4px} .fl-more .ic{width:14px; height:14px}
.fl-apply{width:100%; margin-top:18px; height:48px}

/* ── main listing ──────────────────────────────────────────────────── */
.bk-main{padding:20px 20px 40px; min-width:0}
.bk-main-head{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap}
.bk-main-head h1{font-size:22px; font-weight:700}
.bk-main-tools{display:flex; align-items:center; gap:10px}
.bk-mfilter{display:none; align-items:center; gap:6px; height:40px; padding:0 14px; border:1px solid var(--line); background:#fff; border-radius:10px; font-weight:600; font-size:14px}
.bk-sort{position:relative} .bk-sort-btn{background:#fff; color:var(--txt); border:1px solid var(--line); height:40px; min-width:140px; font-size:14.5px}
.bk-view{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff}
.bk-view a{width:40px; height:40px; display:grid; place-items:center; color:var(--muted)} .bk-view a.is-on{background:var(--ink); color:#fff}
.bk-list{display:flex; flex-direction:column; gap:14px}
.bk-empty{background:#fff; border:1px dashed var(--line); border-radius:var(--r); padding:32px; text-align:center; color:var(--muted); margin-bottom:14px}
.bk-empty h2{font-size:17px; color:var(--txt); margin-bottom:6px} .bk-empty a{color:var(--red); font-weight:600}

/* broker card */
.bc{display:grid; grid-template-columns:272px minmax(0,1fr) 110px; gap:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:8px; box-shadow:var(--shadow); position:relative}
.bc-photo{position:relative; display:block; aspect-ratio:272/190; border-radius:10px; overflow:hidden; background:linear-gradient(160deg,#DCE7F5,#B8CCE6 55%,#E8EEF6)}
.bc-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block}
.bc-photo.is-empty::before{content:""; position:absolute; inset:0; background:
  linear-gradient(to top, rgba(27,58,107,.35), transparent 45%),
  repeating-linear-gradient(90deg, transparent 0 34px, rgba(27,58,107,.10) 34px 52px, transparent 52px 70px, rgba(27,58,107,.16) 70px 84px, transparent 84px 120px);
  mask-image:linear-gradient(to top, #10201A 45%, transparent)}
.bc-ini{position:absolute; inset:0; display:grid; place-items:center; font-size:44px; font-weight:800; color:#1B3A6B; letter-spacing:-.02em}
.bc-verified{position:absolute; left:10px; top:10px; display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--txt); font-weight:700; font-size:13.5px; padding:6px 12px 6px 8px; border-radius:9px; box-shadow:0 2px 8px rgba(0,0,0,.15)}
.bc-verified .ic{color:var(--green); width:17px; height:17px}
.bc-count{position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; background:rgba(11,11,15,.78); color:#fff; font-size:13px; font-weight:600; padding:5px 9px; border-radius:7px}
.bc-count .ic{width:15px; height:15px}
.bc-body{padding:8px 0 4px; min-width:0}
.bc-heart{position:absolute; right:14px; top:14px; background:none; border:0; color:var(--muted-2); padding:4px} .bc-heart .ic{width:22px; height:22px} .bc-heart.is-on{color:var(--red)} .bc-heart.is-on .ic{fill:var(--red)}
.bc-name{font-size:19px; font-weight:700; line-height:1.2} .bc-title{margin:2px 0 6px; color:var(--muted); font-size:14px}
.bc-agency{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; margin-bottom:8px}
.bc-agency img{width:20px; height:20px; border-radius:50%; object-fit:cover}
.bc-agency-ini{width:20px; height:20px; border-radius:50%; background:var(--ink); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center}
.bc-meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13.5px; color:var(--muted); margin-bottom:9px}
.bc-meta > span{display:inline-flex; align-items:center; gap:5px} .bc-meta .ic{width:15px; height:15px}
.bc-lang i{font-style:normal; font-size:15px} .bc-brn{background:#F1F3F6; border-radius:6px; padding:1px 7px; font-weight:600; font-size:12.5px}
.bc-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px}
.bc-tags span{background:#F1F3F6; border-radius:7px; padding:5px 10px; font-size:13px; font-weight:500; color:var(--txt)}
.bc-tags--empty span{background:#FFF7ED; color:#9A5B00}
.bc-areas{display:flex; align-items:center; gap:6px; margin:0 0 10px; color:var(--muted); font-size:14px} .bc-areas .ic{width:15px; height:15px} .bc-areas b{color:var(--muted-2); font-weight:400; margin:0 2px}
.bc-actions{display:flex; flex-wrap:wrap; gap:8px}
.bc-btn{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 16px; border-radius:9px; font-weight:600; font-size:14px; border:1px solid transparent}
.bc-btn .ic{width:16px; height:16px}
.bc-btn--mail{background:var(--blue-soft); color:var(--blue)} .bc-btn--call{background:#F2FAF4; color:var(--red)} .bc-btn--wa{background:var(--wa-soft); color:#128C7E}
.bc-btn--chat{background:var(--ink); color:#fff} .bc-btn:hover{filter:brightness(.95)}
.bc-logo{display:grid; place-items:center; padding:8px; color:#3A4A42} .bc-logo img{max-width:96px; max-height:70px; object-fit:contain; filter:grayscale(1) contrast(1.1)}
.bc-logo-word{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; color:#10201A}
.bc-logo-word b{font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; line-height:1.3}

/* grid view */
body.bk-grid .bk-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
body.bk-grid .bc{grid-template-columns:1fr; gap:10px} body.bk-grid .bc-logo{display:none} body.bk-grid .bc-photo{aspect-ratio:16/10}

.bk-pager{display:flex; gap:6px; justify-content:center; margin-top:22px}
.bk-pager a{min-width:40px; height:40px; padding:0 12px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; border-radius:9px; font-weight:600}
.bk-pager a.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ── chat ──────────────────────────────────────────────────────────── */
.bk-chat{background:#fff; border-left:1px solid var(--line); position:sticky; top:var(--top); height:calc(100vh - var(--top)); display:flex; flex-direction:column}
.ch-head{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.ch-av{width:46px; height:46px; border-radius:50%; overflow:hidden; background:#E6EEF8; color:#1B3A6B; display:grid; place-items:center; font-weight:800; font-size:15px; flex:none}
.ch-av img{width:100%; height:100%; object-fit:cover} .ch-av--sm{width:36px; height:36px; font-size:12px}
.ch-who{display:flex; flex-direction:column; flex:1; min-width:0} .ch-who b{font-size:16px; display:flex; align-items:center; gap:5px} .ch-who small{color:var(--muted); font-size:13px}
.ch-ver{color:var(--green); display:inline-flex} .ch-ver .ic{width:17px; height:17px} .ch-ver[hidden]{display:none}
.ch-more{background:none; border:0; color:var(--muted); padding:4px}
.ch-log{flex:1; overflow:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; background:#FAFBFC}
.ch-day{text-align:center; font-size:12px; color:var(--muted-2); margin:4px 0 2px}
.ch-hint{background:#fff; border:1px dashed var(--line); border-radius:12px; padding:14px; color:var(--muted); font-size:14px} .ch-hint p{margin:0}
.ch-msg{display:flex; gap:10px; align-items:flex-end; max-width:92%} .ch-msg.is-me{align-self:flex-end; flex-direction:row-reverse}
.ch-bub{background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 14px 8px; font-size:14.5px; line-height:1.45; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ch-msg.is-me .ch-bub{background:#EEF3F0; border-color:#EEF3F0}
.ch-bub time{display:block; text-align:right; font-size:11px; color:var(--muted-2); margin-top:4px} .ch-tick{font-style:normal; color:#3B82F6}
.ch-typing{display:flex; align-items:center; gap:8px; padding:6px 16px 10px; font-size:13.5px; color:var(--muted); background:#FAFBFC}
.ch-dots{display:inline-flex; gap:4px; padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:12px}
.ch-dots i{width:6px; height:6px; border-radius:50%; background:#8A968F; animation:chdot 1.2s infinite} .ch-dots i:nth-child(2){animation-delay:.2s} .ch-dots i:nth-child(3){animation-delay:.4s}
@keyframes chdot{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}
.ch-form{border-top:1px solid var(--line); padding:12px 14px 16px; background:#fff}
.ch-id summary{list-style:none; font-size:12.5px; color:var(--muted); cursor:pointer; padding:0 2px 8px} .ch-id summary::-webkit-details-marker{display:none}
.ch-id div{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px}
.ch-id input{height:38px; border:1px solid var(--line); border-radius:9px; padding:0 10px; font:inherit; font-size:13.5px}
.ch-row{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:14px; padding:6px 6px 6px 10px; box-shadow:var(--shadow)}
.ch-clip{background:none; border:0; color:var(--muted); padding:6px} .ch-clip[disabled]{opacity:.5; cursor:default}
.ch-row input{flex:1; border:0; outline:0; font:inherit; font-size:14.5px; min-width:0}
.ch-send{width:42px; height:42px; border-radius:50%; background:var(--red); color:#fff; border:0; display:grid; place-items:center} .ch-send .ic{width:18px; height:18px}
.ch-empty{padding:30px; color:var(--muted); text-align:center}
.bk-chat-fab{display:none; position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:50%; background:var(--red); color:#fff; border:0; box-shadow:0 10px 30px rgba(22,131,63,.4); z-index:60; place-items:center}

/* ── footer ────────────────────────────────────────────────────────── */
.bk-foot{background:var(--ink); color:#fff; border-top:1px solid var(--line-d)}
.bk-foot-in{max-width:1240px; margin:0 auto; padding:36px 28px 28px; display:grid; grid-template-columns:minmax(220px,1.2fr) 3fr auto; gap:40px; align-items:start}
.bk-foot-brand{display:flex; flex-wrap:wrap; align-items:center; gap:12px} .bk-foot-brand p{flex-basis:100%; margin:6px 0 0; color:#8A968F; font-size:13.5px; line-height:1.55; max-width:300px}
.bk-foot-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
.bk-foot-cols h4{font-size:14px; font-weight:700; margin-bottom:10px} .bk-foot-cols a{display:block; color:#AEB9B2; font-size:13.5px; padding:3px 0} .bk-foot-cols a:hover{color:#fff}
.bk-social{display:flex; gap:10px; flex-basis:100%; margin-top:10px} .bk-social a{width:32px; height:32px; border:1px solid var(--line-d); border-radius:8px; display:grid; place-items:center; font-weight:700; color:#fff; font-size:13px} .bk-social a:hover{border-color:#fff}
.bk-foot-uae{display:flex; align-items:center; gap:12px; color:#AEB9B2; font-size:12.5px; line-height:1.35; padding-top:6px}
.bk-foot-uae .uae{font-size:34px; font-weight:800; font-style:italic; letter-spacing:-.04em; color:#fff; opacity:.9}
.bk-foot-bar{border-top:1px solid var(--line-d); padding:14px 28px; max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:#8A968F; font-size:12.5px}
@media (max-width:1100px){ .bk-foot-in{grid-template-columns:1fr 1fr} .bk-foot-uae{grid-column:1/-1} }
@media (max-width:640px){ .bk-foot-in{grid-template-columns:1fr; gap:24px; padding:26px 16px} .bk-foot-cols{grid-template-columns:1fr 1fr} .bk-foot-bar{padding:14px 16px} }

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:1380px){ :root{--chat:340px; --side:224px} .bc{grid-template-columns:230px minmax(0,1fr) 96px} }
@media (max-width:1180px){
  .bk-body{grid-template-columns:var(--side) minmax(0,1fr)}
  .bk-chat{position:fixed; right:0; top:var(--top); width:min(420px,100%); transform:translateX(100%); transition:transform .25s; z-index:46; box-shadow:-10px 0 40px rgba(0,0,0,.15)}
  body.chat-open .bk-chat{transform:none} .bk-chat-fab{display:grid}
}
@media (max-width:900px){
  :root{--top:112px}
  html,body{overflow-x:hidden}
  .bk-top{grid-template-columns:auto 1fr auto; grid-template-areas:"brand right burger" "search search search"; gap:8px 10px; padding:8px 12px; height:var(--top)}
  .bk-brand{grid-area:brand; padding:0; border:0; height:auto} .bk-brand-t small{display:none} .bk-brand-t b{font-size:18px} .bk-logo{width:30px; height:30px}
  .bk-burger{display:block; grid-area:burger; width:38px; height:38px; padding:0; border-radius:10px; background:var(--ink-3); border:1px solid var(--line-d); display:grid; place-items:center} .bk-burger .ic{width:20px; height:20px} .bk-search{grid-area:search; height:40px; max-width:none}
  .bk-top-r{grid-area:right; justify-content:flex-end; gap:8px}
  .bk-em-btn{min-width:0; height:38px; padding:0 10px} .bk-em-btn span{display:none} .bk-btn--ghost{display:none}
  .bk-btn--red{height:38px; padding:0 12px; font-size:13.5px}
  .bk-mfilter{display:inline-flex}
  .bk-main-head h1{font-size:18px}
  .bk-body{grid-template-columns:1fr}
  .bk-side{position:fixed; left:0; top:var(--top); width:min(320px,88%); transform:translateX(-100%); transition:transform .25s; z-index:46; box-shadow:10px 0 40px rgba(0,0,0,.3)}
  body.side-open .bk-side{transform:none}
  .bk-main{padding:14px 12px 30px}
  .bc{grid-template-columns:1fr; gap:10px} .bc-logo{display:none} .bc-photo{aspect-ratio:16/9}
  .bk-search{max-width:none} .bk-search input{font-size:13.5px}
}

/* ═══ v4.6 — professional card with round avatar; thin scrollbars ═══ */
.bk-side,.ch-log,.bk-main,.fl-list,.ld-multi-menu{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent}
.bk-side{overflow-x:hidden} .bk-side::-webkit-scrollbar{width:6px} .bk-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:6px} .bk-side::-webkit-scrollbar-track{background:transparent}
.ch-log{scrollbar-color:#D3DED7 transparent} .ch-log::-webkit-scrollbar{width:6px} .ch-log::-webkit-scrollbar-thumb{background:#D3DED7; border-radius:6px}
html{overflow-x:hidden}
.bc{grid-template-columns:150px minmax(0,1fr); gap:20px; padding:20px 22px; border-radius:18px; border:1px solid #EEF3F0; box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 30px rgba(16,24,40,.06); transition:box-shadow .15s, transform .15s}
.bc:hover{box-shadow:0 2px 4px rgba(16,24,40,.06),0 18px 44px rgba(16,24,40,.12); transform:translateY(-1px)}
.bc-side{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.bc-avatar{position:relative; width:120px; height:120px; border-radius:50%; overflow:visible; display:block; background:linear-gradient(145deg,#DCE7F5,#B8CCE6); box-shadow:0 0 0 4px #fff, 0 0 0 6px #EEF3F0, 0 10px 24px rgba(27,58,107,.18)}
.bc-avatar.is-verified{box-shadow:0 0 0 4px #fff, 0 0 0 6px #1E9E52, 0 10px 24px rgba(30,158,82,.22)}
.bc-avatar img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:50%; display:block}
.bc-avatar .bc-ini{position:absolute; inset:0; display:grid; place-items:center; font-size:38px; font-weight:800; color:#1B3A6B; letter-spacing:-.02em; border-radius:50%}
.bc-avatar.is-empty::before{content:""; position:absolute; inset:0; border-radius:50%; background:repeating-linear-gradient(90deg, transparent 0 18px, rgba(27,58,107,.09) 18px 28px), linear-gradient(to top, rgba(27,58,107,.18), transparent 55%); -webkit-mask-image:linear-gradient(to top,#10201A 40%,transparent); mask-image:linear-gradient(to top,#10201A 40%,transparent)}
.bc-vtick{position:absolute; right:2px; bottom:2px; width:32px; height:32px; border-radius:50%; background:#1E9E52; color:#fff; display:grid; place-items:center; border:3px solid #fff} .bc-vtick .ic{width:18px; height:18px}
.bc-verified{position:static; box-shadow:none; background:#E8F7EE; color:#127A45; font-size:12.5px; padding:5px 12px; border-radius:999px} .bc-verified .ic{color:#1E9E52; width:15px; height:15px}
.bc-verified--lic{background:#F1F3F6; color:#5A6962}
.bc-rating{font-size:13px; font-weight:700; color:#B36B00} .bc-rating small{font-weight:500; color:#8A968F}
.bc-body{padding:0} .bc-top{display:flex; justify-content:space-between; gap:14px; align-items:flex-start}
.bc-titles{min-width:0} .bc-name{font-size:20px; letter-spacing:-.01em} .bc-title{margin:3px 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.bc-brn{background:#F1F3F6; border-radius:6px; padding:1px 8px; font-weight:600; font-size:12px; color:#5A6962}
.bc-tools{display:flex; align-items:center; gap:8px; flex:none}
.bc-logo{display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border:1px solid #EEF3F0; border-radius:999px; color:#10201A; font-size:13px; font-weight:600; max-width:260px} .bc-logo img{width:26px; height:26px; border-radius:50%; object-fit:cover; filter:none}
.bc-logo span:last-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .bc-logo:hover{border-color:#10201A}
.bc-heart{position:static; width:38px; height:38px; border:1px solid #EEF3F0; border-radius:50%; display:grid; place-items:center; padding:0} .bc-heart:hover{border-color:var(--red)}
.bc-meta{margin:12px 0 10px; gap:6px 16px} .bc-area{font-weight:500; color:#10201A}
.bc-tags span{border-radius:999px; padding:5px 12px} .bc-tags--empty span{background:#FFF7ED; color:#9A5B00} .bc-tags--empty a{color:var(--red); font-weight:600}
.bc-actions{margin-top:2px; gap:8px}
.bc-btn{height:40px; padding:0 18px; border-radius:11px; font-size:14px} .bc-btn--chat{background:#10201A; color:#fff; box-shadow:0 6px 16px rgba(11,11,15,.18)} .bc-btn--chat:hover{background:#0F5A2B; filter:none}
.bc-btn--wa{background:#E9F9F0; color:#128C7E; border-color:#BFEBD2} .bc-btn--call{background:#F2FAF4; color:var(--red); border-color:#DDF2E3} .bc-btn--mail{background:#EAF1FF; color:#2563EB; border-color:#C9DBFF}
body.bk-grid .bc{grid-template-columns:1fr} body.bk-grid .bc-side{flex-direction:row; justify-content:flex-start; text-align:left} body.bk-grid .bc-avatar{width:84px; height:84px} body.bk-grid .bc-avatar .bc-ini{font-size:26px}
@media (max-width:1500px){ :root{--chat:330px; --side:230px} .bc{grid-template-columns:128px minmax(0,1fr); padding:18px} .bc-avatar{width:104px; height:104px} .bc-logo span:last-child{max-width:120px} }
@media (max-width:900px){ .bc{grid-template-columns:1fr} .bc-side{flex-direction:row; justify-content:flex-start; text-align:left} .bc-avatar{width:88px; height:88px} .bc-avatar .bc-ini{font-size:28px} .bc-tools{flex-direction:column; align-items:flex-end} }
/* footer sits below the three-panel body on the brokers page */
.bk-body + .ft2, .bk-body ~ .ft2{position:relative; z-index:1}

/* ═══ v4.8 — sidebar stays down the full left edge; footer sits beside it ═══ */
.bk-side{position:fixed; left:0; top:var(--top); bottom:0; width:var(--side); height:auto; z-index:30}
.bk-body{grid-template-columns:minmax(0,1fr) var(--chat); margin-left:var(--side)}
.bk-body--site{grid-template-columns:minmax(0,1fr)}
.ft2{margin-left:var(--side)}
body.bk-landing .ft2{margin-left:0}
@media (max-width:1180px){ .bk-body{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){ .bk-side{width:min(320px,88%); transform:translateX(-100%)} body.side-open .bk-side{transform:none} .bk-body{margin-left:0} .ft2{margin-left:0} }
/* selection feedback before Apply (checked state drives the box) */
.fl-opt:has(input:checked){opacity:1} .fl-opt:has(input:checked) .fl-box{background:var(--red); border-color:var(--red)}
.fl-opt:has(input:checked) .fl-box::after{content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.fl-opt:has(input:checked) .fl-lab{color:#fff!important; font-weight:600}
.fl-opt:not(:has(input:checked)).is-on .fl-box{background:#fff; border-color:#5A6962} .fl-opt:not(:has(input:checked)).is-on .fl-box::after{content:none}
/* filters apply immediately: dim the results while the new page loads */
body.bk-loading .bk-list, body.bk-loading .bc-list, body.bk-loading main{opacity:.55; transition:opacity .15s; pointer-events:none}

/* ═══ Chat = #16833F everywhere (cards, broker profile, request replies, saved) + one-line names ═══ */
.bc-btn--chat,.brp-btn[data-live-chat],.rq-btn[data-live-chat],.pc-act--chat{background:#16833F!important;color:#fff!important;border-color:#16833F!important;box-shadow:0 6px 16px rgba(22,131,63,.28)!important}
.bc-btn--chat:hover,.brp-btn[data-live-chat]:hover,.rq-btn[data-live-chat]:hover,.pc-act--chat:hover{background:#16833F!important;border-color:#16833F!important;filter:none}
.bc-btn--chat .ui-ic,.brp-btn[data-live-chat] .ui-ic,.rq-btn[data-live-chat] .ui-ic{color:#fff}
.bc-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
.bc-titles,.bc-body,.bc-main,.doc-body{min-width:0}
.bc-name a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* ═══ Online Brokers / Online Agencies sidebar ═══ */
.ol{display:flex;flex-direction:column;height:100%;min-height:0;padding:18px 16px 14px;background:#fff;color:#10201A}
.ol-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ol-h h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.ol-n{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#374151;font-size:15px}.ol-n i{width:9px;height:9px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.15)}
.ol-sub{margin:4px 0 12px;color:#8A968F;font-size:13px}
.ol-search{display:flex;align-items:center;gap:9px;height:42px;padding:0 13px;border-radius:12px;background:#F4F7F5;border:1px solid #EEF3F0;color:#8A968F;margin-bottom:6px}
.ol-search svg{width:17px;height:17px;flex:none}.ol-search input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:14px;color:#10201A}
.ol-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0}
.ol-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid #EEF3F0}.ol-row:last-child{border-bottom:0}
.ol-who{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none}
.ol-av{position:relative;width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(145deg,#E6EEF8,#CFDDF0);color:#1B3A6B;font-weight:800;font-size:15px}
.ol-av img{width:100%;height:100%;border-radius:inherit;object-fit:cover}.ol-av--sq{border-radius:12px}
.ol-dot{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:#AEB9B2;border:2.5px solid #fff}
.ol-row.is-on .ol-dot{background:#16A34A}
.ol-t{display:flex;flex-direction:column;min-width:0}.ol-t b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ol-t small{font-size:13px;color:#5A6962;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-who:hover b{color:#16833F}
.ol-chat{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid #E2EAE5;background:#fff;color:#374151;display:grid;place-items:center;cursor:pointer;text-decoration:none}
.ol-chat .ui-ic{width:19px;height:19px}.ol-chat:hover{border-color:#16833F;color:#16833F;background:#F2FAF4}
.ol-empty{margin:18px 0;text-align:center;color:#8A968F;font-size:14px}.ol-empty[hidden]{display:none}
.ol-all{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin-top:10px;border-radius:12px;border:1px solid #E2EAE5;background:#fff;color:#10201A;font-weight:700;text-decoration:none;flex:none}
.ol-all:hover{border-color:#16833F;color:#16833F}
/* brokers page: the right column shows the list; the guest chat replaces it when opened */
.bk-chat .bk-ol{display:flex;flex-direction:column;height:100%;min-height:0}
.bk-chat .bk-chatbox{display:none}
.bk-chat.is-chat .bk-ol{display:none}
.bk-chat.is-chat .bk-chatbox{display:flex;flex-direction:column;height:100%;min-height:0}
.ch-back{width:34px;height:34px;border:0;background:none;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:#10201A;flex:none;margin-right:2px}.ch-back:hover{background:#F4F7F5}.ch-back svg{width:20px;height:20px}
.ch-sys{align-self:center;margin:8px auto;max-width:88%;padding:8px 12px;border-radius:12px;background:#F4F7F5;color:#5A6962;font-size:12.5px;text-align:center;line-height:1.45}
/* V15.3 — unclaimed area: honest notice + request CTA + city brokers */
.bk-empty--area{border-style:solid; text-align:left; padding:24px 26px}
.bk-empty--area h2{margin:0 0 6px; color:var(--ink,#10201A)}
.bk-empty--area p{margin:0; max-width:680px}
.bk-empty-acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.bk-empty-acts .bk-btn{text-decoration:none}
.bk-fallback-h{font-size:16px; font-weight:800; margin:18px 0 10px; color:var(--ink,#10201A)}
.bk-empty .bk-empty-acts .bk-btn--red{color:#fff}
.bk-empty .bk-empty-acts .bk-btn:not(.bk-btn--red){background:#fff; border-color:var(--line); color:var(--txt)}
.bk-empty .bk-empty-acts .bk-btn:not(.bk-btn--red):hover{border-color:var(--red); color:var(--red)}
@media (max-width:640px){ .bk-empty-acts .bk-btn{width:100%; white-space:normal; height:auto; min-height:44px; padding:10px 14px} }
/* V15.4 — live key facts + FAQ */
.bk-summary{margin:-4px 0 12px; font-size:13.5px; color:var(--muted)}
.bk-facts{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin:18px 0 8px}
.bk-facts h2{font-size:17px; margin:0 0 14px; color:var(--txt)}
.bk-facts h3{font-size:14.5px; margin:20px 0 8px; color:var(--txt)}
.bk-facts-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin:0}
.bk-facts-grid div{background:#F7F8FA; border-radius:10px; padding:10px 12px}
.bk-facts-grid dt{font-size:12px; color:var(--muted); font-weight:600}
.bk-facts-grid dd{margin:3px 0 0; font-size:15px; font-weight:800; color:var(--txt)}
.bk-facts-top{margin:0; padding-left:20px; display:grid; gap:4px; font-size:14px}
.bk-facts-top a{color:var(--txt); font-weight:600} .bk-facts-top span{color:var(--muted)}
.bk-faq details{border-top:1px solid var(--line); padding:10px 0}
.bk-faq summary{cursor:pointer; font-weight:700; font-size:14.5px; color:var(--txt)}
.bk-faq p{margin:8px 0 0; font-size:14px; color:var(--muted); line-height:1.55}
.bk-facts-src{margin:14px 0 0; font-size:12.5px; color:var(--muted)} .bk-facts-src a{color:var(--red)}
/* V15.8 — broker main focus */
.bc-tags .bc-tag--focus{background:#F2FAF4; color:#12703A; border-color:#E3F4E8; font-weight:700}

/* V22.148 — chat look from the ZeroSpams theme: dotted green background, light-green own bubbles, white replies */
.lv-log,.ch-log,.msg-log{background-color:#EAF2EC !important;background-image:radial-gradient(#D3E3D7 1.1px,transparent 1.3px) !important;background-size:20px 20px !important}
.lv-m.is-me .lv-b,.ch-msg.is-me .ch-bub,.msg-b.is-me{background:#D6F2DE !important;border-color:#D6F2DE !important;color:#10201A !important;border-radius:16px !important;border-top-right-radius:4px !important}
.lv-m:not(.is-me) .lv-b,.ch-msg:not(.is-me) .ch-bub,.msg-b:not(.is-me){background:#FFFFFF !important;color:#10201A !important;border-radius:16px !important;border-top-left-radius:4px !important}

/* V22.152 — the whole "online now" sidebar in the chat look: dotted green from top to bottom; search, rows and the
   "view all" button are white cards on it; when nobody is online, the icon and message sit centred with no box */
.lv-body{background-color:#EAF2EC !important;background-image:radial-gradient(#D3E3D7 1.1px,transparent 1.3px) !important;background-size:20px 20px !important}
.ag-ol,.ol{background-color:#EAF2EC !important;background-image:radial-gradient(#D3E3D7 1.1px,transparent 1.3px) !important;background-size:20px 20px !important}
.ag-ol .ol{background:transparent !important}
.ol-search{background:#FFFFFF !important}
.ol-row{background:#FFFFFF;border-radius:12px;padding:10px !important;margin:0 0 6px;border-bottom:0 !important;box-shadow:0 1px 2px rgba(16,32,26,.06)}
.ol-all{background:#FFFFFF !important}
.ol:has(.ol-empty:not([hidden])) .ol-list{display:none}
.ol-empty:not([hidden]){flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:12px 0;color:#5A6962;background:none !important}
.ol-empty:not([hidden])::before{content:"";width:44px;height:44px;background:#A3BFAE;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 3.5V17H6.5A2.5 2.5 0 0 1 4 14.5v-8Z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 3.5V17H6.5A2.5 2.5 0 0 1 4 14.5v-8Z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E") center/contain no-repeat}