/* ═══════════════════════════════════════════════════════════════════════
   theme-dark.css — Bookingo platform theme (loaded AFTER home.css
   and brokers.css). Re-maps every legacy teal token to the red/ink palette
   so the agency, specialty, offer, auth and dashboard pages follow the
   /brokers design without rewriting them. Also styles the new homepage.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --teal:#16833F; --teal-dark:#16833F; --teal-soft:#F2FAF4;
  --ink:#10201A; --slate:#5A6962; --mist:#F4F7F5; --line:#E2EAE5; --sale:#16833F; --amber:#F5A623;
  --primary:#16833F; --primary-dark:#16833F; --text-primary:#10201A; --text-secondary:#5A6962; --text-muted:#8A968F;
  --border:#E2EAE5; --card-bg:#fff; --bg-soft:#F4F7F5; --radius:12px;
}
body.bk-site{font-family:Inter,"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--paper,#F4F7F5); color:#10201A}
body.bk-site h1,body.bk-site h2,body.bk-site h3{color:#10201A}

/* legacy header/footer are gone; make sure nothing renders them */
.dn-head,.ft,.dn-burger{display:none!important}

/* site pages sit in the chrome: sidebar (nav only) + main */
.bk-body--site{grid-template-columns:minmax(0,1fr)}
.bk-page{padding:0; background:var(--paper,#F4F7F5)}
.bk-page > .sec,.bk-page > section{padding-left:20px; padding-right:20px}
.bk-page .shell{max-width:1240px; padding:0}
.bk-side-cta{margin-top:auto; background:linear-gradient(160deg,#10201A,#10201A); border:1px solid var(--line-d,rgba(255,255,255,.08)); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:6px}
.bk-side-cta b{font-size:14px} .bk-side-cta small{color:#8A968F; font-size:12.5px; line-height:1.4; margin-bottom:8px}
.bk-side-cta .bk-btn{height:40px; font-size:13.5px; padding:0 12px}
.bk-side{display:flex; flex-direction:column}
.bk-em-btn{text-decoration:none}

/* legacy component re-skin */
.btn-teal,.btn.btn-teal,.btn-primary{background:var(--teal)!important; color:#fff!important; border-color:var(--teal)!important; border-radius:12px}
.btn-teal:hover,.btn-primary:hover{background:var(--teal-dark)!important}
.btn-ghost{border-color:var(--line)!important; background:#fff!important; color:#10201A!important; border-radius:12px}
.chip,.tag-new{border-radius:8px}
.card,.oc,.cc,.doc-card,.dcard,.fx-card,.tc,.emirate{border-radius:14px!important; border:1px solid var(--line)!important; box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06)!important}
.doc-ini,.cc-ini,.ch-av,.dch-av{background:#E6EEF8; color:#1B3A6B}
a.on,.dn-nav a.on{color:var(--teal)}
:focus-visible{outline-color:var(--teal)}


/* dashboard (agency portal): dark sidebar to match */
body.dash{background:#F4F7F5; font-family:Inter,"Plus Jakarta Sans",system-ui,sans-serif}
body.dash .dnav,body.dash .dside,body.dash .dash-side{background:#10201A!important; color:#E2EAE5!important; border-color:rgba(255,255,255,.08)!important}
body.dash .dn-item{color:#E2EAE5!important; border-radius:10px} body.dash .dn-item .ic{color:#AEB9B2}
body.dash .dn-item.on,body.dash .dn-item.is-on{background:linear-gradient(90deg,#0F5A2B,#0F5A2B)!important; color:#fff!important; border:1px solid rgba(22,131,63,.5)}
body.dash .dn-item.on .ic{color:#22A94A!important}
body.dash .dn-badge{background:var(--teal)!important; color:#fff!important}
body.dash .dhelp,body.dash .dside-help{background:#10201A!important; color:#E2EAE5!important}

/* ═══════ homepage ═══════ */
.hm-hero{background:radial-gradient(1200px 500px at 80% -10%, rgba(22,131,63,.18), transparent 60%), linear-gradient(180deg,#10201A,#10201A); color:#fff; padding:64px 28px 56px; position:relative; overflow:hidden}
.hm-hero::after{content:""; position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.25))}
.hm-hero-in{max-width:1180px; margin:0 auto; position:relative; z-index:1}
.hm-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:#22A94A; font-weight:700; margin-bottom:16px}
.hm-eyebrow i{width:8px; height:8px; border-radius:50%; background:var(--red,#16833F); display:inline-block}
body.bk-site .hm-hero h1,.hm-hero h1{color:#fff; font-size:clamp(34px,4.6vw,58px); font-weight:800; letter-spacing:-.03em; line-height:1.05; max-width:820px}
.hm-hero h1 em{font-style:normal; color:#16833F}
.hm-sub{max-width:640px; color:#AEB9B2; font-size:17px; margin:16px 0 26px}
.hm-search{display:grid; grid-template-columns:1.2fr 1fr auto; gap:10px; background:#fff; border-radius:16px; padding:8px; max-width:900px; box-shadow:0 20px 60px rgba(0,0,0,.4)}
.hm-field{display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:10px; background:#F4F7F5; color:#10201A; min-width:0}
.hm-field .ic{color:var(--red,#16833F)} .hm-field label{display:flex; flex-direction:column; flex:1; min-width:0}
.hm-field label span{font-size:11.5px; color:#5A6962; font-weight:600}
.hm-field select{border:0; background:none; font:inherit; font-weight:600; font-size:15px; color:#10201A; outline:0; width:100%}
.hm-search .bk-btn{height:auto; min-height:56px; padding:0 26px; font-size:16px}
.hm-quick{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; color:#8A968F; font-size:13.5px; align-items:center}
.hm-quick a{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#E2EAE5; border-radius:999px; padding:6px 12px; font-weight:600; font-size:13px}
.hm-quick a:hover{background:rgba(22,131,63,.25); border-color:rgba(22,131,63,.5)}
.hm-stats{display:flex; flex-wrap:wrap; gap:26px; margin-top:34px}
.hm-stat b{display:block; font-size:28px; font-weight:800; letter-spacing:-.02em; color:#fff} .hm-stat span{color:#8A968F; font-size:13.5px}

.hm-sec{padding:38px 28px 6px} .hm-sec-in{max-width:1180px; margin:0 auto}
.hm-sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px}
.hm-sec-head h2{font-size:22px; font-weight:700} .hm-sec-head p{margin:4px 0 0; color:#5A6962; font-size:14.5px}
.hm-sec-head a.more{color:var(--red,#16833F); font-weight:700; font-size:14px; white-space:nowrap}
.hm-areas{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.hm-area{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow,0 1px 2px rgba(16,24,40,.05))}
.hm-area .ic{color:var(--red,#16833F); width:22px; height:22px} .hm-area b{display:block; font-size:15px} .hm-area small{color:#5A6962; font-size:12.5px}
.hm-area:hover{border-color:#10201A}
.hm-services{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
.hm-service{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow,0 1px 2px rgba(16,24,40,.05))}
.hm-service b{display:block; font-size:16px; margin-bottom:4px} .hm-service p{margin:0 0 10px; color:#5A6962; font-size:13.5px; line-height:1.45}
.hm-service .tags{display:flex; flex-wrap:wrap; gap:6px} .hm-service .tags span{background:#F1F3F6; border-radius:7px; padding:4px 9px; font-size:12.5px; font-weight:500}
.hm-brokers{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px}
.hm-brokers .bc{grid-template-columns:1fr; gap:10px} .hm-brokers .bc-logo{display:none} .hm-brokers .bc-photo{aspect-ratio:16/9}
.hm-cta{margin:40px 28px 46px; background:linear-gradient(120deg,#10201A,#0F5A2B 60%,#0F5A2B); color:#fff; border-radius:20px; padding:36px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center}
body.bk-site .hm-cta h2,.hm-cta h2{color:#fff; font-size:26px; font-weight:800; letter-spacing:-.02em} .hm-cta p{color:#D3DED7; margin:6px 0 0; max-width:640px}
.hm-cta ul{display:flex; flex-wrap:wrap; gap:14px 22px; margin:14px 0 0; padding:0; list-style:none; font-size:14px; color:#E2EAE5}
.hm-cta li::before{content:"✓"; color:#22A94A; font-weight:800; margin-right:6px}
.hm-cta .bk-btn{height:52px; padding:0 26px; font-size:16px}
@media (max-width:1180px){ .hm-cta{grid-template-columns:1fr} }
@media (max-width:900px){
  .bk-body--site{grid-template-columns:1fr; margin-left:0}
  .bk-page > .sec,.bk-page > section{padding-left:12px; padding-right:12px}
  .hm-hero{padding:34px 16px 34px} .hm-search{grid-template-columns:1fr} .hm-sec{padding:26px 12px 0} .hm-cta{margin:26px 12px 30px; padding:24px}
}
/* dashboard welcome band + help card on the new palette */
body.dash .dash-hero h1,body.dash .dash-hero h2,body.dash .dash-hero p{color:#fff}
body.dash .dash-hero-quote{background:rgba(255,255,255,.1); color:#DDF2E3; border:1px solid rgba(255,255,255,.14)}
body.dash .dhelp b,body.dash .dhelp p,body.dash .dhelp span{color:#E2EAE5!important}
/* portal brand */
.dside-logo,.dside .dlogo{display:flex; align-items:center; gap:10px}

/* ═══════ landing (homepage) chrome + hero ═══════ */
body.bk-landing{background:#10201A}
.ld-top{position:sticky; top:0; z-index:40; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:14px max(40px, calc((100% - 1480px) / 2 + 40px)); background:linear-gradient(180deg,rgba(11,11,15,.96),rgba(11,11,15,.85)); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06)}
.ld-brand{display:flex; align-items:center; gap:12px} .ld-brand .bk-logo{width:45px; height:45px}
.ld-brand-t{display:flex; flex-direction:column; line-height:1} .ld-brand-t b{font-size:30px; font-weight:800; letter-spacing:-.03em; color:#fff} .ld-brand-t b em{font-style:normal; color:#16833F}
.ld-brand-t small{font-size:10.5px; letter-spacing:.32em; color:#AEB9B2; margin-top:6px; font-weight:600}
.ld-nav{display:flex; justify-content:center; gap:34px} .ld-nav a{color:#E2EAE5; font-weight:600; font-size:16px; padding:8px 2px; border-bottom:2.5px solid transparent}
.ld-nav a.is-on{color:#fff; border-color:var(--red,#16833F)} .ld-nav a:hover{color:#fff}
.ld-top-r{display:flex; align-items:center; gap:18px}
.ld-lang{position:relative} .ld-lang > button{display:flex; align-items:center; gap:8px; background:none; border:0; color:#fff; font-weight:600; font-size:16px}
.ld-flag{width:26px; height:18px; border-radius:3px; background:linear-gradient(180deg,#009739 0 33%,#fff 33% 66%,#10201A 66%); position:relative; overflow:hidden; display:inline-block}
.ld-flag::before{content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:#16833F}
.ld-lang .bk-em-menu{left:0; right:auto} .is-soon{display:block; padding:10px 12px; color:#8A968F} .is-soon small{font-size:11px; background:#F1F3F6; padding:1px 6px; border-radius:6px; margin-left:6px}
.ld-cta{display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 22px; border:1.5px solid rgba(255,255,255,.35); border-radius:14px; color:#fff; font-weight:600; font-size:16px}
.ld-cta:hover{border-color:#fff; background:rgba(255,255,255,.06)} .ld-cta .ic{width:22px; height:22px}
.ld-burger{display:none}

.ld-hero{position:relative; overflow:hidden; background:radial-gradient(900px 500px at 92% 40%, rgba(22,131,63,.32), transparent 60%), radial-gradient(700px 400px at 70% 20%, rgba(255,255,255,.05), transparent 60%), #10201A; color:#fff; padding:44px 40px 40px; min-height:640px}
.ld-hero::before{content:""; position:absolute; right:-6%; top:-20%; width:34%; height:150%; background:linear-gradient(115deg,transparent 45%, rgba(22,131,63,.22) 45% 62%, transparent 62% 70%, rgba(22,131,63,.16) 70% 84%, transparent 84%); pointer-events:none}
.ld-sky{position:absolute; left:0; right:0; bottom:230px; height:420px; pointer-events:none; opacity:.95}
.ld-sky svg{width:100%; height:100%; display:block; -webkit-mask-image:linear-gradient(90deg,transparent 40%,#10201A 55%,#10201A 92%,transparent); mask-image:linear-gradient(90deg,transparent 40%,#10201A 55%,#10201A 92%,transparent)}
.ld-hero-in{position:relative; z-index:1; max-width:1400px; margin:0 auto}
.ld-eyebrow{font-size:12.5px; letter-spacing:.42em; text-transform:uppercase; color:#16833F; font-weight:700; margin:0 0 14px}
body.bk-site .ld-hero h1{color:#fff; font-size:clamp(38px,5.4vw,74px); font-weight:800; letter-spacing:-.035em; line-height:1; margin:0}
.ld-hero h1 em{font-style:normal; color:#16833F}
.ld-sub{max-width:700px; color:#D3DED7; font-size:19px; line-height:1.4; margin:22px 0 40px}
.ld-dubai{position:absolute; right:40px; top:30px; text-align:left; color:#E2EAE5; z-index:1}
.ld-dubai b{display:block; font-size:18px; letter-spacing:.42em; font-weight:600} .ld-dubai i{display:block; width:36px; height:1px; background:#16833F; margin:12px 0}
.ld-dubai span{font-size:12px; letter-spacing:.32em; line-height:1.9; text-transform:uppercase; color:#AEB9B2}

.ld-search{position:relative; margin-top:6px; background:#10201A; border:1px solid rgba(255,255,255,.1); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.55)}
.ld-tabs{display:flex; gap:6px; padding:10px 10px 0}
.ld-tabs button{display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 24px; border-radius:12px; border:0; background:transparent; color:#AEB9B2; font-weight:700; font-size:15.5px; transition:background .15s,color .15s}
.ld-tabs button:hover{color:#fff; background:#10201A}
.ld-tabs button.is-on{background:var(--red,#16833F); color:#fff}
.ld-tabs .ic{width:22px; height:22px}
.ld-fields{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) 1.05fr; gap:0; margin:10px; background:#10201A; border-radius:14px; border:1px solid rgba(255,255,255,.08); overflow:visible; position:relative; z-index:1}
.ld-field{position:relative; display:flex; align-items:center; gap:14px; padding:12px 18px; border-right:1px solid rgba(255,255,255,.08); min-width:0; cursor:pointer}
.ld-field .ic{width:26px; height:26px; color:#fff; flex:none}
.ld-field > span{display:flex; flex-direction:column; flex:1; min-width:0}
.ld-field b{font-size:15.5px; font-weight:500; color:#fff} 
.ld-field select{appearance:none; -webkit-appearance:none; background:transparent; border:0; color:#8A968F; font:inherit; font-size:15px; padding:2px 26px 0 0; outline:0; width:100%; cursor:pointer}
.ld-field select option{color:#10201A; background:#fff}
.ld-field::after{content:""; position:absolute; right:18px; top:50%; width:9px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-70%) rotate(45deg); pointer-events:none}
.ld-field--multi{border-right:0}
.ld-multi-btn{flex:1; display:flex; flex-direction:column; align-items:flex-start; background:none; border:0; color:#fff; text-align:left; padding:0; min-width:0}
.ld-multi-btn b{font-size:15.5px; font-weight:500} .ld-multi-btn span{color:#8A968F; font-size:15px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; padding-right:26px}
.ld-multi-menu{position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; color:#10201A; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.4); padding:8px; max-height:300px; overflow:auto; z-index:20; display:grid; grid-template-columns:1fr 1fr; gap:2px}
.ld-multi-menu label{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:14px; cursor:pointer} .ld-multi-menu label:hover{background:#F4F7F5}
.ld-go{display:inline-flex; align-items:center; justify-content:center; gap:12px; margin:8px; border:0; border-radius:12px; background:var(--red,#16833F); color:#fff; font-weight:700; font-size:20px; min-height:56px}
.ld-go:hover{background:#16833F} .ld-go .ic{width:24px; height:24px}
.ld-popular{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px; color:#fff}
.ld-pop-lab{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:16px; margin-right:6px} .ld-pop-lab i{font-style:normal; font-size:20px}
.ld-popular a{border:1.5px solid rgba(255,255,255,.28); border-radius:999px; padding:10px 20px; color:#fff; font-size:15px; font-weight:500}
.ld-popular a:hover{background:rgba(22,131,63,.25); border-color:#16833F}
.ld-adv{margin-left:auto; border:0!important; padding:0!important; display:inline-flex; align-items:center; gap:10px; border-left:1px solid rgba(255,255,255,.3)!important; border-radius:0!important; padding-left:22px!important}
.ld-adv:hover{background:none!important; color:#22A94A}
body.bk-landing .hm-sec,body.bk-landing .hm-cta{background:transparent}
body.bk-landing .hm-sec{background:#F4F7F5} body.bk-landing #areas{padding-top:40px}
body.bk-landing #brokers{padding-bottom:10px}
body.bk-landing .hm-cta{margin:0; border-radius:0; padding:48px max(40px, calc((100% - 1480px) / 2 + 40px))}
@media (max-width:1280px){ .ld-fields{grid-template-columns:repeat(2,minmax(0,1fr))} .ld-field:nth-child(2){border-right:0} .ld-field{border-bottom:1px solid rgba(255,255,255,.08)} .ld-go{grid-column:1/-1} .ld-dubai{display:none} }
@media (max-width:900px){
  .ld-top{grid-template-columns:auto 1fr auto; grid-template-areas:'brand right burger'; padding:10px 14px; gap:10px} .ld-brand{grid-area:brand} .ld-top-r{grid-area:right} .ld-burger{grid-area:burger} .ld-nav{display:none} .ld-burger{display:grid; place-items:center; width:40px; height:40px; background:#10201A; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#fff}
  body.ld-nav-open .ld-nav{display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%; background:#10201A; padding:12px 16px; gap:4px; border-bottom:1px solid rgba(255,255,255,.08)}
  .ld-brand .bk-logo{width:34px; height:34px} .ld-brand-t b{font-size:22px} .ld-brand-t small{display:none} .ld-lang{display:none} .ld-top-r{justify-content:flex-end} .ld-cta{height:40px; padding:0 12px; font-size:13.5px; white-space:nowrap; border-radius:10px} .ld-cta .ic{width:18px; height:18px} .ld-top{position:relative}
  .ld-hero{padding:26px 14px 30px; min-height:0} .ld-sky{display:none} .ld-sub{font-size:16px; margin:14px 0 22px}
  .ld-fields{grid-template-columns:1fr} .ld-field{border-right:0} .ld-tabs button{height:44px; padding:0 16px; font-size:14px}
  .ld-popular a{padding:8px 14px; font-size:13.5px} .ld-adv{margin-left:0; border-left:0!important; padding-left:0!important}
  body.bk-landing .hm-cta{padding:26px 14px}
}
/* live counts */
.ld-tab-n{font-size:12px; font-weight:700; background:rgba(255,255,255,.12); padding:2px 8px; border-radius:999px; color:#E2EAE5; margin-left:2px}
.ld-tabs button.is-on .ld-tab-n{background:rgba(0,0,0,.25); color:#fff}
.ld-go{flex-direction:row; flex-wrap:wrap; gap:4px 12px; line-height:1.1}
.ld-go-t{font-size:20px; font-weight:700} .ld-go-n{display:block; width:100%; text-align:center; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85); letter-spacing:.02em; transition:opacity .15s}
.ld-go-n.is-loading{opacity:.45}
.bk-me{gap:8px; padding-left:8px} .bk-me-av{width:30px; height:30px; border-radius:50%; background:#E6EEF8; color:#1B3A6B; display:grid; place-items:center; font-size:11px; font-weight:800}
/* v4.1 top bar member controls + sidebar promo */
.bk-ico{position:relative; width:46px; height:46px; border-radius:12px; background:var(--ink-3,#10201A); border:1px solid var(--line-d,rgba(255,255,255,.08)); color:#fff; display:grid; place-items:center} .bk-ico .ic{width:22px; height:22px}
.bk-ico b{position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--red,#16833F); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; border:2px solid #10201A}
.bk-user{position:relative} .bk-user > button{display:flex; align-items:center; gap:10px; height:46px; padding:0 12px 0 6px; background:var(--ink-3,#10201A); border:1px solid var(--line-d,rgba(255,255,255,.08)); border-radius:12px; color:#fff}
.bk-user .bk-me-av{width:36px; height:36px; overflow:hidden} .bk-user .bk-me-av img{width:100%; height:100%; object-fit:cover}
.bk-user-t{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1} .bk-user-t b{font-size:14.5px; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .bk-user-t small{color:#8A968F; font-size:12px}
.bk-nav-n{margin-left:auto; background:var(--red,#16833F); color:#fff; border-radius:999px; font-size:11.5px; font-weight:800; padding:2px 8px}
.bk-side-cta--promo{padding:0; overflow:hidden; gap:0}
.bk-promo-img{display:block; height:110px; background:linear-gradient(180deg,transparent 30%,#10201A), radial-gradient(60px 40px at 70% 60%, rgba(255,205,120,.35), transparent), linear-gradient(160deg,#3B2A1E,#10201A)}
.bk-side-cta--promo b,.bk-side-cta--promo small,.bk-side-cta--promo .bk-btn{margin:0 16px} .bk-side-cta--promo b{margin-top:12px; font-size:15px} .bk-side-cta--promo .bk-btn{margin-bottom:16px; margin-top:12px}
@media (max-width:900px){ .bk-ico,.bk-user-t{display:none} .bk-user > button{padding:0 6px} }
/* CMS page helpers used by the v4.3 copy */
.cms .steps{display:flex; flex-direction:column; gap:16px; margin:10px 0 26px}
.cms .step{display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.cms .step-n{width:40px; height:40px; border-radius:12px; background:var(--red,#16833F); color:#fff; font-weight:800; display:grid; place-items:center; flex:none; font-size:17px}
.cms .step h3{margin:2px 0 4px; font-size:16px} .cms .step p{margin:0; color:#5A6962}
.cms .w-faq{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; margin:8px 0 26px}
.cms .w-faq-q{font-weight:700; padding:14px 18px 4px} .cms .w-faq-a{padding:0 18px 14px; color:#5A6962; border-bottom:1px solid #F0F2F5} .cms .w-faq-a:last-child{border-bottom:0}
.cms .ic-badge.is-amber{background:#FFF4E0; color:#B36B00}
.pg-hero-art svg [fill="var(--teal-soft)"]{fill:#F2FAF4}

/* ═══ footer v2 (matches the design) ═══ */
.ft2{position:relative; background:#10201A; color:#fff; overflow:hidden; border-top:1px solid rgba(255,255,255,.06)}
.ft2-sky{position:absolute; right:0; top:0; bottom:0; width:30%; pointer-events:none; opacity:.32; -webkit-mask-image:linear-gradient(90deg,transparent,#10201A 40%); mask-image:linear-gradient(90deg,transparent,#10201A 40%)}
.ft2-sky svg{width:100%; height:100%; display:block}
.ft2-in{position:relative; max-width:1440px; margin:0 auto; padding:56px 40px 40px; display:grid; grid-template-columns:minmax(360px,1.25fr) 1.55fr minmax(380px,1.2fr); gap:40px; align-items:start}
.ft2-brand .ld-brand{margin-bottom:18px} .ft2-brand .ld-brand .bk-logo{width:60px; height:60px} .ft2-brand .ld-brand-t b{font-size:38px} .ft2-brand .ld-brand-t small{letter-spacing:.34em; font-size:11px}
.ft2-brand > p{color:#D3DED7; font-size:16px; line-height:1.5; margin:0 0 22px; max-width:420px}
.ft2-trust{list-style:none; margin:0; padding:0; display:flex; gap:12px; flex-wrap:nowrap}
.ft2-trust li{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:#D3DED7; font-size:13px; line-height:1.25; width:72px}
.ft2-trust span{width:60px; height:60px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); display:grid; place-items:center; color:#16833F} .ft2-trust .ic{width:26px; height:26px}
.ft2-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding-top:6px}
.ft2 h4{font-size:19px; font-weight:700; margin:0 0 14px; color:#fff}
.ft2-cols a{display:block; color:#AEB9B2; font-size:15.5px; padding:6px 0} .ft2-cols a:hover{color:#fff}
.ft2-side{border-left:1px solid rgba(255,255,255,.1); padding-left:44px; padding-top:6px} .ft2-side p{color:#D3DED7; font-size:15px; line-height:1.5; margin:0 0 16px}
.ft2-news{position:relative; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:8px 8px 8px 14px}
.ft2-news-ic{color:#AEB9B2; display:inline-flex} .ft2-news-ic .ic{width:22px; height:22px}
.ft2-news input[type=email]{flex:1; min-width:0; background:none; border:0; outline:0; color:#fff; font:inherit; font-size:15px} .ft2-news input::placeholder{color:#8A968F}
.ft2-news .bk-btn{height:46px; padding:0 22px}
.ft2-news-msg{font-size:13px; margin-top:8px!important} .ft2-news-msg.is-ok{color:#5FD08A!important} .ft2-news-msg.is-bad{color:#22A94A!important}
.ft2-app-h{margin-top:26px!important}
.ft2-apps{display:flex; gap:12px; flex-wrap:wrap}
.ft2-app{display:inline-flex; align-items:center; gap:8px; background:#10201A; border:1.5px solid rgba(255,255,255,.7); border-radius:12px; padding:7px 14px 7px 10px; color:#fff; opacity:.85}
.ft2-app .ic{width:24px; height:24px} .ft2-app small{display:block; font-size:10px; line-height:1} .ft2-app b{display:block; font-size:16px; line-height:1.15; font-weight:600}
.ft2-bar{position:relative; max-width:1440px; margin:0 auto; padding:20px 40px 26px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:28px; flex-wrap:wrap; color:#D3DED7; font-size:15px}
.ft2-bar b{color:#fff} .ft2-uae{display:inline-flex; align-items:center; gap:12px} .ft2-uae .ld-flag{width:34px; height:24px; border-radius:4px}
.ft2-soc{display:inline-flex; gap:12px; margin-left:auto} .ft2-soc a{width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:grid; place-items:center; color:#fff} .ft2-soc svg{width:24px; height:24px} .ft2-soc a:hover{background:rgba(22,131,63,.3); border-color:#16833F}
.ft2-tag{display:inline-flex; align-items:center; gap:14px; color:#E2EAE5} .ft2-tag i{display:inline-block; width:56px; height:2px; background:var(--red,#16833F)}
@media (max-width:1400px){ .ft2-in{grid-template-columns:1fr 1fr; gap:36px} .ft2-side{grid-column:1/-1; border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.1); padding-top:28px} .ft2-sky{opacity:.14} }
@media (max-width:760px){ .ft2-in{grid-template-columns:1fr; padding:36px 16px 24px; gap:28px} .ft2-cols{grid-template-columns:1fr 1fr; gap:16px} .ft2-cols div:last-child{grid-column:1/-1} .ft2-brand .ld-brand-t b{font-size:30px} .ft2-bar{padding:18px 16px 22px; gap:14px} .ft2-soc{margin-left:0} .ft2-tag{display:none} .ft2-sky{display:none} }
/* footer beside a sidebar has ~250px less room: use the stacked layout earlier */
@media (min-width:761px) and (max-width:1700px){ body:not(.bk-landing) .ft2-in{grid-template-columns:1fr 1fr; gap:36px} body:not(.bk-landing) .ft2-side{grid-column:1/-1; border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.1); padding-top:28px} body:not(.bk-landing) .ft2-sky{opacity:.14} }
@media (min-width:761px) and (max-width:1700px){ body:not(.bk-landing) .ft2-cols{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* landing: avatar account menu (replaces EN + List Your Profile) */
.ld-user{position:relative}
.ld-user-btn{display:flex; align-items:center; gap:10px; height:52px; padding:0 14px 0 6px; border-radius:999px; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.25); color:#fff; font-weight:600; font-size:15px}
.ld-user-btn:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.ld-user-av{width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg,#16833F,#16833F); color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; overflow:hidden} .ld-user-av img{width:100%; height:100%; object-fit:cover} .ld-user-av .ic{width:20px; height:20px}
.ld-user-panel{position:absolute; right:0; top:calc(100% + 10px); width:340px; background:#fff; color:#10201A; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); padding:14px; z-index:60}
.ld-user-panel::before{content:""; position:absolute; right:22px; top:-7px; width:14px; height:14px; background:#fff; transform:rotate(45deg); border-radius:3px}
.ld-user-panel > a{display:block; padding:10px 12px; border-radius:10px; font-weight:600; color:#10201A} .ld-user-panel > a:hover{background:#F4F7F5} .ld-user-panel > a.is-primary{color:var(--red,#16833F)} .ld-user-panel > a.is-muted{color:#5A6962}
.ld-user-me{padding:6px 12px 12px; border-bottom:1px solid #F0F2F5; margin-bottom:6px} .ld-user-me b{display:block; font-size:15px} .ld-user-me small{color:#5A6962; font-size:12.5px}
.ld-tabs2{display:grid; grid-template-columns:1fr 1fr; background:#F1F3F6; border-radius:12px; padding:4px; margin-bottom:12px}
.ld-tabs2 button{height:38px; border:0; border-radius:9px; background:transparent; font-weight:700; font-size:14px; color:#5A6962} .ld-tabs2 button.is-on{background:#fff; color:#10201A; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ld-mini{display:flex; flex-direction:column; gap:10px} .ld-mini label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:#5A6962}
.ld-mini input{height:42px; border:1px solid #E2EAE5; border-radius:10px; padding:0 12px; font:inherit; font-size:14px; color:#10201A} 
.ld-mini .bk-btn{height:44px; margin-top:2px} .ld-mini small{font-size:12.5px; color:#5A6962; text-align:center} .ld-mini small a{color:var(--red,#16833F); font-weight:600}
@media (max-width:900px){ .ld-user-btn{height:40px; padding:0 8px 0 4px} .ld-user-av{width:30px; height:30px} .ld-user-name{display:none} .ld-user-panel{width:min(340px, calc(100vw - 24px))} }

/* ═══ international phone input ═══ */
.ip{display:flex; align-items:stretch; flex:1; min-width:0; position:relative}
.ip-btn{display:flex; align-items:center; gap:7px; height:auto; line-height:1; padding:0 10px 0 12px; border:0; border-right:1px solid #E2EAE5; background:#F4F7F5; color:#10201A; font-weight:700; font-size:14px; white-space:nowrap; cursor:pointer; border-radius:10px 0 0 10px; align-self:stretch}
.ip-btn svg{color:#8A968F} .ip-flag{width:24px; height:18px; border-radius:3px; object-fit:cover; display:block}
.ip > input[type=tel]{flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:15px; padding:0 12px; height:100%}
.ip-menu{position:absolute; left:0; top:calc(100% + 6px); width:300px; max-width:calc(100vw - 32px); background:#fff; color:#10201A; border:1px solid #E2EAE5; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.25); z-index:80; padding:8px}
.ip-search{width:100%; height:38px; border:1px solid #E2EAE5; border-radius:9px; padding:0 10px; font:inherit; font-size:14px; margin-bottom:6px; box-sizing:border-box}
.ip-list{max-height:260px; overflow:auto; scrollbar-width:thin}
.ip-list button{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; background:none; border-radius:8px; font:inherit; font-size:14px; color:#10201A; cursor:pointer; text-align:left}
.ip-list button:hover,.ip-list button.is-on{background:#F4F7F5} .ip-list button span{flex:1} .ip-list button small{color:#8A968F}
.ff-wrap .ip{height:46px} .ff-wrap .ip-btn{border-radius:0}
.ld-mini .ip{height:42px; border:1px solid #E2EAE5; border-radius:10px; overflow:visible} .ld-mini .ip > input{height:40px} .ld-mini .ip-btn{border-radius:9px 0 0 9px}
.ch-id .ip{height:38px; border:1px solid #E2EAE5; border-radius:9px} .ch-id .ip > input{height:36px; font-size:13.5px} .ch-id .ip-btn{padding:0 8px; font-size:13px; border-radius:8px 0 0 8px}
.otp-big{letter-spacing:.35em; font-size:22px!important; font-weight:700}
.ip-iso{font-size:11px; font-weight:800; background:#E2EAE5; color:#10201A; border-radius:4px; padding:2px 5px}

.ip-msg{font-size:12px; margin-top:4px; color:#5A6962} .ip-msg.is-ok{color:#127A45} .ip-msg.is-bad{color:#16833F}
.ip.is-bad{border-color:#16833F} .ip.is-ok{border-color:#1E9E52}
.ld-mini label .ip{display:flex} .ld-mini .ip > input[type=tel]{border:0}
/* password eye everywhere */
.pw-wrap{position:relative; display:flex; align-items:center} .pw-wrap > input{flex:1; min-width:0; padding-right:42px!important}
.pw-wrap .ff-eye{position:absolute; right:2px; top:50%; transform:translateY(-50%); width:38px; height:38px; display:grid; place-items:center}
.ff-eye .e-off{display:none} .ff-eye.is-on .e-off{display:block} .ff-eye.is-on .e-open{display:none}
.ff-wrap .ff-eye{display:grid; place-items:center; height:100%}

/* account-type chooser (panel) */
.ld-types-t{font-weight:700; font-size:14px; margin:2px 0 4px; color:#10201A}
.ld-type{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:1.5px solid #E2EAE5; border-radius:12px; padding:10px 12px; color:#10201A; cursor:pointer; font:inherit}
.ld-type:hover{border-color:var(--red,#16833F); background:#F6FBF8}
.ld-type-ic{width:42px; height:42px; border-radius:11px; background:#10201A; display:grid; place-items:center; flex:none} .ld-type-ic .ic{width:24px; height:24px; color:#fff}
.ld-type > span:nth-child(2){flex:1; min-width:0} .ld-type b{display:block; font-size:14px} .ld-type small{display:block; color:#5A6962; font-size:12px; margin-top:1px}
.ld-type i{font-style:normal; color:#8A968F; font-size:20px}
.ld-back{align-self:flex-start; background:none; border:0; color:#5A6962; font-weight:600; font-size:13px; padding:0; cursor:pointer}

/* /join page */
.jn{background:#10201A; color:#fff; padding:64px 24px 60px; min-height:calc(100vh - 80px)}
.jn-in{max-width:1180px; margin:0 auto; text-align:center}
.jn-logo{display:inline-grid; place-items:center; width:120px; height:120px; border-radius:26px; background:#fff; margin-bottom:34px} .jn-logo svg{width:76px; height:76px}
body.bk-site .jn h1,.jn h1{color:#fff; font-size:clamp(34px,5vw,60px); font-weight:800; letter-spacing:-.03em; margin:0 0 18px} .jn h1 em{font-style:normal; color:#16833F}
.jn-sub{color:#AEB9B2; font-size:20px; line-height:1.5; margin:0 0 44px}
.jn-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px}
.jn-card{display:flex; flex-direction:column; align-items:center; background:#10201A; border:1.5px solid rgba(255,255,255,.14); border-radius:22px; padding:38px 30px 30px; color:#fff; text-decoration:none; transition:transform .15s, border-color .15s}
.jn-card:hover{transform:translateY(-3px); border-color:#16833F}
.jn-ic{width:90px; height:90px; display:grid; place-items:center; margin-bottom:22px} .jn-ic svg{width:88px; height:88px}
body.bk-site .jn-card h2,.jn-card h2{color:#fff; font-size:26px; font-weight:800; line-height:1.15; margin:0 0 16px} .jn-card p{color:#D3DED7; font-size:16.5px; line-height:1.5; margin:0 0 26px; max-width:300px}
.jn-btn{display:inline-flex; align-items:center; justify-content:center; width:100%; height:62px; border-radius:14px; background:var(--red,#16833F); font-weight:700; font-size:19px; margin-top:auto} .jn-card small{color:#8A968F; font-size:15px; margin-top:16px}
.jn-login{display:flex; align-items:center; gap:18px; justify-content:center; color:#AEB9B2; font-size:17px; margin:48px 0 42px} .jn-login span{flex:0 0 160px; height:1px; background:rgba(255,255,255,.14)} .jn-login a{color:#16833F; text-decoration:underline}
.jn-trust{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; text-align:left}
.jn-trust li{display:flex; align-items:center; gap:14px} .jn-trust .ic{width:42px; height:42px; color:#16833F; flex:none} .jn-trust b{display:block; font-size:17px} .jn-trust small{color:#8A968F; font-size:15px}
@media (max-width:900px){ .jn{padding:36px 14px} .jn-cards{grid-template-columns:1fr} .jn-login span{flex-basis:40px} .jn-trust{grid-template-columns:1fr} }

/* ═══ App bar: bottom tabs on mobile, floating dock on desktop ═══ */
.appbar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid; grid-template-columns:repeat(7,1fr); align-items:end; background:rgba(11,11,15,.96); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.08); padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.appbar a{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; color:#8A968F; font-size:10.5px; font-weight:600; text-decoration:none; border-radius:10px}
.appbar a svg{width:24px; height:24px} .appbar a.is-on{color:#fff} .appbar a.is-on svg{color:#16833F}
.appbar a b{position:absolute; top:2px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--red,#16833F); color:#fff; font-size:10.5px; font-weight:800; display:grid; place-items:center; border:2px solid #10201A}
.appbar-av{width:26px; height:26px; border-radius:50%; object-fit:cover}
.appbar-post{align-self:center; justify-self:center; width:52px; height:52px; border-radius:16px; background:var(--red,#16833F); color:#fff!important; padding:0!important; box-shadow:0 8px 20px rgba(22,131,63,.45); transform:translateY(-10px)} .appbar-post svg{width:26px; height:26px}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body.bk-landing{padding-bottom:0}
/* desktop: compact floating dock, bottom-centre */
@media (min-width:901px){
  body{padding-bottom:0}
  .appbar{left:50%; right:auto; bottom:18px; transform:translateX(-50%); width:auto; grid-template-columns:repeat(7,auto); gap:2px; border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:6px 10px; box-shadow:0 16px 48px rgba(0,0,0,.45)}
  .appbar a{padding:6px 10px; font-size:10px} .appbar a svg{width:22px; height:22px}
  .appbar-post{width:44px; height:44px; border-radius:13px; transform:none; margin:0 6px}
  .appbar a:hover{color:#fff}
  body:not(.bk-landing) .appbar{left:calc(50% + var(--side)/2)}
  .bk-chat .ch-form{padding-bottom:16px}
}
@media (max-width:900px){
  .bk-chat{bottom:calc(72px + env(safe-area-inset-bottom,0px)); height:auto} .ft2{padding-bottom:10px}
  .ld-top{position:sticky; top:0} .bk-top{position:sticky; top:0}
  .bk-side{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .appbar a span{font-size:10px}
}
.ld-flame{width:20px; height:20px; color:#16833F}
.pc-r svg{width:11px; height:11px; color:#fff}
/* v5.6: desktop → icons live in the header; app bar is mobile-only */
@media (min-width:901px){ .appbar{display:none} }
.ld-quick{display:flex; align-items:center; gap:10px; margin-right:6px}
.ld-ico{position:relative; width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:#fff; display:grid; place-items:center} .ld-ico svg{width:22px; height:22px} .ld-ico:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.ld-ico b{position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--red,#16833F); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; border:2px solid #10201A}
.ld-ico--post{background:var(--red,#16833F); border-color:var(--red,#16833F)} .ld-ico--post:hover{background:#16833F; border-color:#16833F}
@media (max-width:900px){ .ld-quick{display:none} }

/* ═══ global search (landing header + typeahead) ═══ */
.ld-top{grid-template-columns:auto minmax(0,1fr) auto}
.ld-gsearch{position:relative; display:flex; align-items:center; gap:12px; height:56px; max-width:760px; width:100%; margin:0 auto; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.16); border-radius:16px; padding:0 14px 0 18px; color:#AEB9B2; transition:border-color .15s, background .15s}
.ld-gsearch:focus-within{ background:rgba(255,255,255,.09)} .ld-gsearch > .ic{width:22px; height:22px; color:#16833F; flex:none}
.ld-gsearch input{flex:1; min-width:0; background:none; border:0; outline:0; box-shadow:none; -webkit-appearance:none; appearance:none; color:#fff; font:inherit; font-size:16px} .ld-gsearch input::placeholder{color:#8A968F} .ld-gsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.ld-gsearch kbd{font:600 12px/1 Inter,system-ui; color:#8A968F; border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:4px 7px}
.ld-nav{display:none}
.gs-menu{position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; color:#10201A; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); padding:8px; z-index:70; max-height:70vh; overflow:auto; text-align:left}
.gs-g{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8A968F; font-weight:700; padding:10px 12px 4px}
.gs-it{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:#10201A; text-decoration:none} .gs-it:hover,.gs-it.is-sel{background:#F4F7F5}
.gs-ic{width:36px; height:36px; border-radius:10px; background:#F1F3F6; color:#16833F; display:grid; place-items:center; flex:none} .gs-ic svg{width:19px; height:19px}
.gs-it > span:last-child{min-width:0} .gs-t{display:block; font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .gs-t b{color:#16833F} .gs-it small{display:block; color:#5A6962; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gs-all{display:block; margin:6px 4px 2px; padding:10px 12px; border-top:1px solid #F0F2F5; color:#16833F; font-weight:700; font-size:14px; text-decoration:none} .gs-all.is-sel,.gs-all:hover{background:#F6FBF8; border-radius:10px}
.gs-empty{padding:14px 12px 6px; color:#5A6962; font-size:14px}
.bk-search{position:relative} .bk-search .gs-menu{color:#10201A}
@media (max-width:900px){ .ld-top{grid-template-columns:auto 1fr auto; grid-template-areas:'brand right burger' 'search search search'; height:auto} .ld-gsearch{grid-area:search; height:46px; margin-top:8px; border-radius:12px} .ld-gsearch kbd{display:none} .ld-gsearch input{font-size:14.5px}
  .ld-nav{display:none} body.ld-nav-open .ld-nav{display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%; background:#10201A; padding:12px 16px; gap:4px; border-bottom:1px solid rgba(255,255,255,.08); z-index:50} body.ld-nav-open .ld-nav a{padding:10px 4px; font-weight:600; color:#E2EAE5} :root{--top:118px} }

/* ═══ LIVE: floating chat, toasts, bell dropdown ═══ */
.lv{position:fixed; right:20px; bottom:20px; z-index:90; font-family:Inter,system-ui,sans-serif}
.lv-bubble{position:relative; width:58px; height:58px; border-radius:50%; border:0; background:var(--red,#16833F); color:#fff; box-shadow:0 12px 30px rgba(22,131,63,.45); display:grid; place-items:center; cursor:pointer} .lv-bubble svg{width:26px; height:26px}
.lv-bubble b{position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#10201A; color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; border:2px solid #fff}
.lv-panel{position:absolute; right:0; bottom:70px; width:380px; height:min(560px, calc(100vh - 120px)); background:#fff; color:#10201A; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; border:1px solid #E2EAE5}
.lv-head{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px; border-bottom:1px solid #F0F2F5; background:#fff}
.lv-title{flex:1; min-width:0; display:flex; align-items:center; gap:10px} .lv-title b{display:block; font-size:15px} .lv-title small{display:block; color:#5A6962; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .lv-title small a{color:#16833F; font-weight:600}
.lv-back,.lv-close,.lv-mute{width:34px; height:34px; border-radius:50%; border:0; background:#F1F3F6; color:#10201A; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; flex:none} .lv-mute svg{width:18px; height:18px; color:#5A6962}
.lv-body{flex:1; overflow:auto; scrollbar-width:thin}
.lv-av{width:40px; height:40px; border-radius:50%; background:#E6EEF8; color:#1B3A6B; display:grid; place-items:center; font-weight:800; font-size:13px; flex:none; object-fit:cover} .lv-av--sm{width:34px; height:34px; font-size:12px} .lv-av--xs{width:26px; height:26px; font-size:10px}
.lv-th{display:flex; align-items:center; gap:12px; width:100%; padding:10px 14px; border:0; background:#fff; text-align:left; cursor:pointer; font:inherit; border-bottom:1px solid #F4F7F5} .lv-th:hover{background:#F8F9FB}
.lv-th > span{flex:1; min-width:0} .lv-th b{display:block; font-size:14px} .lv-th small{display:block; color:#5A6962; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .lv-th.is-unread b,.lv-th.is-unread small{font-weight:700; color:#10201A}
.lv-th em{font-style:normal; font-size:11px; color:#8A968F; display:flex; flex-direction:column; align-items:flex-end; gap:4px} .lv-th em i{font-style:normal; min-width:18px; height:18px; border-radius:999px; background:#16833F; color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; padding:0 5px}
.lv-log{padding:12px; display:flex; flex-direction:column; gap:6px; background:#F8F9FB}
.lv-day{align-self:center; font-size:11px; color:#8A968F; margin:6px 0}
.lv-m{display:flex; align-items:flex-end; gap:6px; max-width:85%} .lv-m.is-me{align-self:flex-end; flex-direction:row-reverse}
.lv-b{background:#fff; border:1px solid #E2EAE5; border-radius:16px; padding:8px 12px 6px; font-size:14px; line-height:1.4; word-wrap:break-word} .lv-m.is-me .lv-b{background:#16833F; color:#fff; border-color:#16833F}
.lv-b time{display:block; text-align:right; font-size:10.5px; opacity:.65; margin-top:2px}
.lv-typing{display:flex; gap:4px; padding:4px 16px 8px; background:#F8F9FB} .lv-typing span{width:7px; height:7px; border-radius:50%; background:#8A968F; animation:chdot 1.2s infinite} .lv-typing span:nth-child(2){animation-delay:.2s} .lv-typing span:nth-child(3){animation-delay:.4s}
.lv-form{display:flex; gap:8px; padding:10px; border-top:1px solid #F0F2F5; background:#fff} .lv-form input{flex:1; height:42px; border:1px solid #E2EAE5; border-radius:999px; padding:0 14px; font:inherit; font-size:14px} 
.lv-form button{width:42px; height:42px; border-radius:50%; border:0; background:#16833F; color:#fff; display:grid; place-items:center; cursor:pointer} .lv-form button svg{width:18px; height:18px}
.lv-empty{padding:26px 16px; color:#5A6962; font-size:14px; text-align:center; line-height:1.5} .lv-empty a{color:#16833F; font-weight:600}
.lv-toasts{position:fixed; right:20px; top:90px; z-index:95; display:flex; flex-direction:column; gap:10px; width:340px; max-width:calc(100vw - 32px); pointer-events:none}
.lv-toast{pointer-events:auto; display:flex; align-items:center; gap:12px; background:#fff; color:#10201A; border:1px solid #E2EAE5; border-left:4px solid #16833F; border-radius:14px; padding:12px 14px; box-shadow:0 18px 50px rgba(0,0,0,.28); text-decoration:none; transform:translateX(30px); opacity:0; transition:transform .25s, opacity .25s}
.lv-toast.is-in{transform:none; opacity:1} .lv-toast > span{flex:1; min-width:0} .lv-toast b{display:block; font-size:14px} .lv-toast small{display:block; color:#5A6962; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .lv-toast i{font-style:normal; color:#8A968F; font-size:18px; padding:0 4px}
.lv-bellwrap{position:relative} .lv-bellmenu{position:absolute; right:0; top:calc(100% + 10px); width:360px; max-width:calc(100vw - 24px); background:#fff; color:#10201A; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); padding:6px; z-index:80; max-height:70vh; overflow:auto}
.lv-bh{display:flex; justify-content:space-between; align-items:center; padding:10px 12px 8px; font-size:14px} .lv-bh a{color:#16833F; font-weight:600; font-size:13px}
.lv-n{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#10201A; text-decoration:none; font-size:13.5px} .lv-n:hover{background:#F4F7F5} .lv-n.is-new{background:#F6FBF8} .lv-n > span{flex:1; min-width:0} .lv-n small{display:block; color:#5A6962; font-size:12.5px} .lv-n time{font-size:11px; color:#8A968F}
@media (max-width:900px){ .lv{right:12px; bottom:calc(84px + env(safe-area-inset-bottom,0px))} .lv-panel{position:fixed; inset:0; width:auto; height:auto; border-radius:0; bottom:0} body.lv-open .appbar{display:none} .lv-toasts{top:auto; bottom:calc(90px + env(safe-area-inset-bottom,0px)); right:12px} }

/* no inner borders on any search/select inside dark controls */
.ld-multi-btn:focus{outline:0; box-shadow:none; border-color:transparent}
.ld-field select{box-shadow:none}


/* brand mark (PNG) */
.bk-logo{border-radius:9px; object-fit:contain} .jn-logo{background:transparent; border-radius:26px; overflow:hidden} .jn-logo img{width:120px; height:120px; display:block}

/* ═══ chat widget — dark, like the mock ═══ */
.lv-panel{background:#10201A; color:#fff; border-color:rgba(255,255,255,.1)}
.lv-head{background:#10201A; border-bottom:1px solid rgba(255,255,255,.08)} .lv-title b{color:#fff} .lv-title small{color:#8A968F} .lv-title small a{color:#22A94A}
.lv-back,.lv-close,.lv-mute{background:rgba(255,255,255,.08); color:#fff} .lv-mute svg{color:#AEB9B2}
.lv-th{background:transparent; color:#fff; border-bottom:1px solid rgba(255,255,255,.06); padding:12px 14px 12px 12px; gap:14px; position:relative}
.lv-th:hover{background:rgba(255,255,255,.04)} .lv-th.is-on::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#16833F}
.lv-av--th{width:52px; height:52px; font-size:15px; background:#fff; color:#10201A; border-radius:50%}
.lv-th > span.lv-th-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px} .lv-th-r{display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0}
.lv-th b{font-size:15.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .lv-th time{font-size:12px; color:#8A968F; flex:none}
.lv-th small{font-size:13.5px; color:#AEB9B2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0}
.lv-th.is-unread small{color:#fff} .lv-th.is-unread b{color:#fff}
.lv-th i{font-style:normal; min-width:22px; height:22px; border-radius:999px; background:#16833F; color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; padding:0 6px; flex:none}
.lv-tick{width:18px; height:18px; color:#8A968F; flex:none} .lv-tick.is-read{color:#25D366}
.lv-log{background:#10201A} .lv-day{color:#8A968F} .lv-b{background:#10201A; border-color:#10201A; color:#fff} .lv-m.is-me .lv-b{background:#16833F; border-color:#16833F} .lv-b time{opacity:.7}
.lv-typing{background:#10201A} .lv-form{background:#10201A; border-top:1px solid rgba(255,255,255,.08)} .lv-form input{background:#10201A; border-color:rgba(255,255,255,.12); color:#fff} .lv-form input::placeholder{color:#8A968F}
.lv-empty{color:#8A968F} .lv-av--xs,.lv-av--sm{background:#fff; color:#10201A}
.lv-th > .lv-av,.lv-th > img.lv-av{flex:0 0 52px!important; width:52px!important; height:52px!important; border-radius:50%!important}
.lv-th > span.lv-th-b{flex:1 1 auto!important}
.lv-title > span{min-width:0; flex:1} .lv-title b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:15.5px}
.lv-title > .lv-av,.lv-title > img.lv-av,.lv-m > .lv-av,.lv-m > img.lv-av,.lv-toast > .lv-av,.lv-toast > img.lv-av,.lv-n > .lv-av,.lv-n > img.lv-av{flex:0 0 auto!important; border-radius:50%!important}
.lv-title > .lv-av--sm{width:36px!important; height:36px!important}
.lv-av{aspect-ratio:1/1}
.lv-title > span{flex:1 1 auto; min-width:0}

/* ═══ dark select (hero City / Area / Property Type) ═══ */
.ds{position:relative; flex:1; min-width:0} .ds > select{position:absolute; opacity:0; pointer-events:none; width:1px; height:1px}
.ds-btn{width:100%; background:none; border:0; padding:2px 26px 0 0; text-align:left; color:#fff; font:inherit; font-size:15px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .ds-btn.is-placeholder{color:#8A968F}
.ds-menu{position:absolute; left:-58px; top:calc(100% + 14px); width:max(100%, 300px); max-width:calc(100vw - 32px); background:#10201A; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.55); padding:8px; z-index:60}
.ds-search{width:100%; box-sizing:border-box; height:40px; background:#10201A; border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#fff; padding:0 12px; font:inherit; font-size:14px; margin-bottom:6px; outline:0} 
.ds-list{max-height:300px; overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent}
.ds-list button{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:9px; background:none; color:#E2EAE5; font:inherit; font-size:14.5px; text-align:left; cursor:pointer}
.ds-list button:hover{background:rgba(255,255,255,.06); color:#fff} .ds-list button.is-on{background:rgba(22,131,63,.18); color:#fff; font-weight:600} .ds-list button svg{width:18px; height:18px; color:#16833F}
.ds-empty{padding:12px; color:#8A968F; font-size:14px}
/* languages menu: wide, single column, not clipped */
.ld-multi-menu{left:auto; right:0; width:340px; max-width:calc(100vw - 32px); top:calc(100% + 14px); background:#10201A; color:#fff; border:1px solid rgba(255,255,255,.12); grid-template-columns:1fr; gap:0; padding:8px}
.ld-multi-menu label{gap:10px; padding:9px 12px; color:#E2EAE5; font-size:14.5px} .ld-multi-menu label:hover{background:rgba(255,255,255,.06); color:#fff}
.ld-multi-menu input[type=checkbox]{appearance:auto; -webkit-appearance:auto; width:17px; height:17px; accent-color:#16833F; margin:0; position:static; opacity:1; pointer-events:auto}
.ld-flagimg{border-radius:3px; flex:none}
.ld-field--multi{position:relative}
/* hero: let dropdowns overflow; decoration clipped in its own layer */
.ld-hero{overflow:visible; z-index:20}
.ld-hero::before{content:none}
.ld-deco{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.ld-deco::before{content:""; position:absolute; right:-6%; top:-20%; width:34%; height:150%; background:linear-gradient(115deg,transparent 45%, rgba(22,131,63,.22) 45% 62%, transparent 62% 70%, rgba(22,131,63,.16) 70% 84%, transparent 84%)}
.ld-hero-in{z-index:2}
.hm-sec,.hm-cta{position:relative; z-index:1}
.ds-menu,.ld-multi-menu,.ld-user-panel,.gs-menu{z-index:120}
/* dropdowns attach to the field: same width, same left edge, flush below */
.ld-field{position:relative} .ds{position:static}
.ds-menu,.ld-multi-menu{left:-1px; right:-1px; width:auto; max-width:none; top:calc(100% + 2px); border-radius:0 0 14px 14px; border-top:0; box-shadow:0 24px 60px rgba(0,0,0,.6); padding:6px}
.ld-field:has(.ds-menu:not([hidden])),.ld-field:has(.ld-multi-menu:not([hidden])){background:#10201A; border-radius:14px 14px 0 0}
.ds-list,.ld-multi-menu{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent} .ds-list::-webkit-scrollbar,.ld-multi-menu::-webkit-scrollbar{width:6px} .ds-list::-webkit-scrollbar-thumb,.ld-multi-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:6px}
.ds-list button{padding:11px 14px; border-radius:9px}
.ld-multi-menu{max-height:320px}
@media (max-width:1280px){ .ld-field:nth-child(2) .ds-menu{right:-1px} }

/* ═══ Purpose ═══ */
.ld-fields--5{grid-template-columns:repeat(5,minmax(0,1fr)) 1fr}
@media (max-width:1400px){ .ld-fields--5{grid-template-columns:repeat(3,minmax(0,1fr))} .ld-fields--5 .ld-field{border-bottom:1px solid rgba(255,255,255,.08)} .ld-fields--5 .ld-field:nth-child(3){border-right:0} .ld-fields--5 .ld-go{grid-column:1/-1} }
@media (max-width:900px){ .ld-fields--5{grid-template-columns:1fr} }
.fl-purpose{padding:10px 8px 14px} .fl-purpose-h{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8A968F; font-weight:700; margin-bottom:8px}
.fl-purpose-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.fl-pp{display:flex; flex-direction:column; gap:2px; padding:9px 10px; border-radius:10px; background:var(--ink-3,#10201A); border:1px solid var(--line-d,rgba(255,255,255,.08)); color:#E2EAE5; text-decoration:none}
.fl-pp b{font-size:13px} .fl-pp small{font-size:11.5px; color:#8A968F} .fl-pp:hover{border-color:#16833F} .fl-pp.is-on{background:linear-gradient(90deg,#0F5A2B,#0F5A2B); border-color:rgba(22,131,63,.6); color:#fff}
.rq-purpose{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.rq-pp{position:relative; cursor:pointer} .rq-pp input{position:absolute; opacity:0; width:0; height:0}
.rq-pp span{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1.5px solid var(--line,#E2EAE5); border-radius:12px; color:#10201A} .rq-pp b{font-size:14px} .rq-pp small{font-size:12px; color:#5A6962; font-weight:500}
.rq-pp input:checked + span{border-color:var(--red,#16833F); background:#F6FBF8} .rq-pp input:checked + span b{color:var(--red,#16833F)}
@media (max-width:700px){ .rq-purpose{grid-template-columns:1fr 1fr} }

/* chat bubble: brand icon */
.lv-bubble{width:64px; height:64px; background:transparent; box-shadow:0 12px 30px rgba(22,131,63,.4); padding:0; transition:transform .15s} .lv-bubble img{width:64px; height:64px; display:block; border-radius:50%} .lv-bubble:hover{transform:scale(1.06)}
.lv-bubble b{top:-2px; right:-2px}
body.lv-open .lv-bubble{transform:scale(.92)}

.bk-imp{background:#FFF4E0; color:#8A6116; border-radius:10px; padding:0 12px; height:46px; display:inline-flex; align-items:center; font-weight:700; font-size:13px}

/* ═══ /agencies (v7.5) ═══ */
.ag-hero{position:relative; background:linear-gradient(120deg,#10201A 0%,#10201A 55%,#0F5A2B 100%); color:#fff; padding:40px 0 30px; z-index:20}
.ag-hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(600px 300px at 85% 10%, rgba(22,131,63,.25), transparent 70%); z-index:0}
.ag-hero-in{position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:0 28px}
.ag-hero .crumb{color:#8A968F; font-size:13px} .ag-hero .crumb a{color:#22A94A}
body.bk-site .ag-hero h1,.ag-hero h1{color:#fff; font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.03em; margin:8px 0 8px}
.ag-lead{color:#D3DED7; font-size:16.5px; max-width:720px; margin:0 0 20px}
.ag-stats{display:flex; gap:34px; margin-bottom:22px} .ag-stats b{display:block; font-size:26px; font-weight:800} .ag-stats span{font-size:12.5px; color:#8A968F; text-transform:uppercase; letter-spacing:.06em}
.ag-search{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; background:#10201A; border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:8px; gap:0}
.ag-f{position:relative; display:flex; align-items:center; gap:12px; padding:8px 16px; border-right:1px solid rgba(255,255,255,.08); min-width:0} .ag-f:nth-child(4){border-right:0}
.ag-f > .ic{width:22px; height:22px; color:#16833F; flex:none} .ag-f > span{flex:1; min-width:0; display:flex; flex-direction:column} .ag-f b{font-size:13.5px; color:#fff; font-weight:700}
.ag-f input{background:none; border:0; outline:0; color:#fff; font:inherit; font-size:15px; padding:2px 0} .ag-f input::placeholder{color:#8A968F}
.ag-f .ds-btn{color:#E2EAE5} .ag-f .ds-menu{left:-1px; right:-1px}
.ag-go{display:inline-flex; align-items:center; gap:8px; height:56px; padding:0 26px; border:0; border-radius:12px; background:var(--red,#16833F); color:#fff; font-weight:800; font-size:16px; cursor:pointer} .ag-go .ic{width:20px; height:20px} .ag-go:hover{background:#16833F}
.ag-chips{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px} .ag-chips span{color:#8A968F; font-size:13.5px; font-weight:600; margin-right:4px}
.ag-chips a{padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.18); color:#E2EAE5; font-size:13.5px; text-decoration:none} .ag-chips a:hover{border-color:#fff} .ag-chips a.is-on{background:var(--red,#16833F); border-color:var(--red,#16833F); color:#fff}
.ag-body{max-width:1240px; margin:0 auto; padding:24px 28px 40px}
.ag-bar{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px} .ag-count{font-size:16px; color:#5A6962} .ag-count b{color:#10201A; font-size:20px}
.ag-toggles{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.ag-tg{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid #E2EAE5; border-radius:999px; background:#fff; color:#10201A; font-weight:600; font-size:13.5px; text-decoration:none}
.ag-tg i{width:30px; height:18px; border-radius:999px; background:#D3DED7; position:relative} .ag-tg i::after{content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s}
.ag-tg.is-on i{background:var(--red,#16833F)} .ag-tg.is-on i::after{left:14px}
.ag-sort{position:relative} .ag-sort > button{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid #E2EAE5; border-radius:999px; background:#fff; font:inherit; font-size:13.5px; color:#5A6962; cursor:pointer} .ag-sort b{color:#10201A}
.ag-sort-m{position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid #E2EAE5; border-radius:12px; box-shadow:0 18px 40px rgba(16,24,40,.15); padding:6px; min-width:180px; z-index:30} .ag-sort-m a{display:block; padding:9px 12px; border-radius:8px; color:#10201A; text-decoration:none; font-size:14px} .ag-sort-m a:hover{background:#F4F7F5} .ag-sort-m a.is-on{color:var(--red,#16833F); font-weight:700}
.ag-list{display:flex; flex-direction:column; gap:12px}
.ag-card{display:grid; grid-template-columns:76px minmax(0,1fr) 150px 190px; gap:20px; align-items:center; background:#fff; border:1px solid #EEF3F0; border-radius:18px; padding:18px 20px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05); transition:box-shadow .15s, transform .15s}
.ag-card:hover{box-shadow:0 2px 4px rgba(16,24,40,.06),0 16px 40px rgba(16,24,40,.1); transform:translateY(-1px)}
.ag-logo{width:76px; height:76px; border-radius:16px; background:linear-gradient(145deg,#10201A,#0F5A2B); display:grid; place-items:center; overflow:hidden; text-decoration:none} .ag-logo img{width:100%; height:100%; object-fit:contain; background:#fff} .ag-logo span{color:#fff; font-size:30px; font-weight:800}
.ag-main{min-width:0} .ag-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ag-name{font-size:18px; font-weight:800; color:#10201A; text-decoration:none; letter-spacing:-.01em} .ag-name:hover{color:var(--red,#16833F)}
.ag-badge{font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; background:#F1F3F6; color:#5A6962; display:inline-flex; align-items:center; gap:4px} .ag-badge .ic{width:13px; height:13px} .ag-badge--v{background:#E8F7EE; color:#127A45}
.ag-meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; color:#5A6962; font-size:13.5px} .ag-meta span{display:inline-flex; align-items:center; gap:4px} .ag-meta .ic{width:15px; height:15px} .ag-rate{color:#B36B00; font-weight:700} .ag-rate .ic{fill:#F5A623; color:#F5A623} .ag-rate small{color:#8A968F; font-weight:500}
.ag-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px} .ag-tags span{padding:4px 10px; border-radius:999px; background:#F4F7F5; font-size:12.5px; color:#10201A} .ag-tag-a{background:#F2FAF4!important; color:#16833F!important}
.ag-team{display:flex; flex-direction:column; align-items:center; text-align:center; border-left:1px solid #F0F2F5; border-right:1px solid #F0F2F5; padding:0 10px}
.ag-avs{display:flex; margin-bottom:6px} .ag-avs img,.ag-avs i{width:34px; height:34px; border-radius:50%; border:2px solid #fff; margin-left:-9px; object-fit:cover; background:#E6EEF8; color:#1B3A6B; font-style:normal; font-size:11px; font-weight:800; display:grid; place-items:center} .ag-avs > :first-child{margin-left:0}
.ag-team b{font-size:22px; font-weight:800; color:#10201A; line-height:1} .ag-team small{font-size:12px; color:#8A968F}
.ag-cta{display:flex; flex-direction:column; gap:10px; align-items:stretch}
.ag-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; border-radius:12px; font-weight:700; font-size:14.5px; text-decoration:none} .ag-btn .ic{width:18px; height:18px}
.ag-btn--p{background:var(--red,#16833F); color:#fff; box-shadow:0 8px 18px rgba(22,131,63,.22)} .ag-btn--p:hover{background:#16833F}
.ag-quick{display:flex; justify-content:center; gap:8px} .ag-q{width:38px; height:38px; border-radius:50%; border:1px solid #E2EAE5; display:grid; place-items:center; color:#5A6962} .ag-q .ic{width:18px; height:18px} .ag-q:hover{border-color:#10201A; color:#10201A} .ag-q--wa{color:#128C7E}
.ag-empty{background:#fff; border:1px dashed #D3DED7; border-radius:18px; padding:46px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; color:#5A6962} .ag-empty .ic{width:40px; height:40px; color:#8A968F} .ag-empty b{color:#10201A; font-size:17px} .ag-empty a{color:var(--red,#16833F); font-weight:700; margin-top:6px}
.ag-pager{display:flex; justify-content:center; align-items:center; gap:6px; margin:22px 0 6px} .ag-pager a{padding:8px 13px; border:1px solid #E2EAE5; border-radius:10px; background:#fff; color:#10201A; text-decoration:none; font-weight:600; font-size:14px} .ag-pager a.is-on{background:#10201A; color:#fff; border-color:#10201A} .ag-pager span{color:#8A968F; font-size:13px}
.ag-claim{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:26px; padding:22px 26px; border-radius:18px; background:linear-gradient(120deg,#10201A,#0F5A2B); color:#fff} .ag-claim b{display:block; font-size:18px} .ag-claim span{color:#D3DED7; font-size:14.5px} .ag-claim .ag-btn{padding:0 22px}
@media (max-width:1200px){ .ag-search{grid-template-columns:1fr 1fr} .ag-f{border-bottom:1px solid rgba(255,255,255,.08)} .ag-f:nth-child(2n){border-right:0} .ag-go{grid-column:1/-1; justify-content:center; margin-top:8px} .ag-card{grid-template-columns:64px minmax(0,1fr) 120px} .ag-cta{grid-column:1/-1; flex-direction:row} .ag-cta .ag-btn{flex:1} }
@media (max-width:700px){ .ag-hero-in,.ag-body{padding-left:14px; padding-right:14px} .ag-search{grid-template-columns:1fr} .ag-f{border-right:0} .ag-stats{gap:20px} .ag-stats b{font-size:20px} .ag-card{grid-template-columns:56px minmax(0,1fr); gap:14px} .ag-logo{width:56px; height:56px} .ag-team{grid-column:1/-1; flex-direction:row; gap:8px; border:0; justify-content:flex-start; padding:0} .ag-avs{margin:0} }
/* agencies: sidebar-filter layout */
.bk-filters{padding:6px 12px 20px; border-top:1px solid var(--line-d,rgba(255,255,255,.08)); margin-top:6px}
.ag-fl .fl-search{margin:0 4px 10px} .ag-fl-q{margin-bottom:12px!important}
.fl-box--r{border-radius:50%!important}
.ag-body--side{max-width:none; padding:22px 28px 40px}
.ag-h1{font-size:24px; font-weight:800; letter-spacing:-.01em; color:#10201A; margin:0}
/* sidebar starts at "I want to" on directory pages */
.fl-purpose-h{display:flex; justify-content:space-between; align-items:center} .fl-purpose-h .fl-clear{font-size:12px; text-transform:none; letter-spacing:0}
.bk-side > .bk-filters:first-child,.bk-side > form.bk-filters:first-child{border-top:0; margin-top:0; padding-top:14px}
.bk-side > .bk-filters:first-child .fl-purpose,.bk-side > form.bk-filters:first-child .fl-purpose{padding-top:4px}
.bk-side .fl-opt,.bk-side .fl-opt .fl-lab,.bk-side summary{color:#E2EAE5} .bk-side .fl-opt.is-zero .fl-lab{color:#8A968F}
.bk-side .fl-opt input[type=radio],.bk-side .fl-opt input[type=checkbox]{position:absolute; opacity:0; width:0; height:0}
/* Online now toggle (directory sidebars) */
.fl-online{display:flex; align-items:center; gap:12px; margin:12px 4px 14px; padding:12px 14px; border-radius:12px; background:var(--ink-3,#10201A); border:1px solid var(--line-d,rgba(255,255,255,.08)); cursor:pointer; color:#E2EAE5}
.fl-online input{position:absolute; opacity:0; width:0; height:0}
.fl-online-dot{width:10px; height:10px; border-radius:50%; background:#1E9E52; box-shadow:0 0 0 4px rgba(30,158,82,.2); flex:none}
.fl-online-t{flex:1; min-width:0} .fl-online-t b{display:block; font-size:14.5px} .fl-online-t small{display:block; color:#8A968F; font-size:12px}
.fl-sw{width:38px; height:22px; border-radius:999px; background:#3A4A42; position:relative; flex:none; transition:background .15s} .fl-sw::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s}
.fl-online.is-on{border-color:rgba(30,158,82,.5)} .fl-online.is-on .fl-sw{background:#1E9E52} .fl-online.is-on .fl-sw::after{left:19px}
.bk-h1-n{display:inline-block; margin-left:8px; padding:3px 10px; border-radius:999px; background:#F1F3F6; color:#5A6962; font-size:13px; font-weight:700; vertical-align:middle; letter-spacing:0}
#bkH1{transition:opacity .2s} #bkH1.is-preview{opacity:.85}
.fl-flagimg{width:20px; height:15px; border-radius:2px; object-fit:cover; flex:none}
.bc-nat{display:inline-flex; align-items:center; gap:5px; font-weight:600; color:#10201A} .bc-nat img{border-radius:2px}

/* ═══ UI dialog + toasts (site, dashboard, admin) ═══ */
html.ui-lock{overflow:hidden}
.ui-dlg{position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:20px; background:rgba(11,11,15,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .16s ease}
.ui-dlg[hidden]{display:none} .ui-dlg.is-in{opacity:1}
.ui-dlg-box{width:100%; max-width:420px; background:#fff; color:#10201A; border-radius:20px; padding:26px 26px 20px; box-shadow:0 30px 80px rgba(0,0,0,.35); transform:translateY(12px) scale(.97); transition:transform .18s cubic-bezier(.2,.8,.2,1); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; text-align:left}
.ui-dlg.is-in .ui-dlg-box{transform:none}
.ui-dlg-ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:16px; background:#F2FAF4; color:#16833F} .ui-dlg-ic svg{width:26px; height:26px}
.is-danger .ui-dlg-ic{background:#F2FAF4; color:#12703A} .is-warn .ui-dlg-ic{background:#FFF4E0; color:#B7791F} .is-info .ui-dlg-ic{background:#EEF2FF; color:#3B5BDB} .is-success .ui-dlg-ic{background:#E8F7EE; color:#1E9E52}
.ui-dlg-body h3{margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.3; color:#10201A}
.ui-dlg-body p{margin:8px 0 0; font-size:14.5px; line-height:1.55; color:#5A6962} .ui-dlg-body p[hidden]{display:none}
.ui-dlg-act{display:flex; justify-content:flex-end; gap:10px; margin-top:24px}
.ui-btn{min-width:108px; height:44px; padding:0 18px; border-radius:12px; border:0; background:#10201A; color:#fff; font:inherit; font-weight:700; font-size:14.5px; cursor:pointer; transition:background .12s, box-shadow .12s}
.ui-btn:hover{background:#10201A} .ui-btn:focus-visible{outline:0; box-shadow:0 0 0 3px rgba(22,131,63,.35)}
.ui-btn--danger{background:#16833F} .ui-btn--danger:hover{background:#16833F}
.ui-btn--ghost{background:#fff; color:#10201A; border:1.5px solid #E2EAE5} .ui-btn--ghost:hover{background:#F4F7F5}
.ui-btn[hidden]{display:none}
@media (max-width:520px){ .ui-dlg{align-items:end; padding:0} .ui-dlg-box{max-width:none; border-radius:20px 20px 0 0; padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px)); transform:translateY(40px)} .ui-dlg-act{flex-direction:column-reverse} .ui-btn{width:100%; height:48px} }
.ui-toasts{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:2100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:calc(100vw - 24px)}
.ui-toast{pointer-events:auto; display:flex; align-items:center; gap:10px; padding:11px 12px 11px 14px; border-radius:14px; background:#10201A; color:#fff; box-shadow:0 14px 40px rgba(0,0,0,.3); font:600 14px/1.4 Inter,system-ui,sans-serif; opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s}
.ui-toast.is-in{opacity:1; transform:none} .ui-toast-ic{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; background:#1E9E52} .ui-toast-ic svg{width:14px; height:14px; color:#fff}
.ui-toast.is-danger .ui-toast-ic{background:#16833F} .ui-toast.is-warn .ui-toast-ic{background:#D97706} .ui-toast.is-info .ui-toast-ic{background:#3B5BDB}
.ui-toast button{border:0; background:none; color:#8A968F; font-size:18px; cursor:pointer; padding:0 4px; line-height:1}
@media (max-width:900px){ .ui-toasts{bottom:calc(92px + env(safe-area-inset-bottom,0px))} }
.bk-ico.is-on{background:linear-gradient(90deg,#0F5A2B,#0F5A2B); border-color:rgba(22,131,63,.6); color:#fff}
.ic-feed{width:21px!important; height:21px!important}
/* report dialog */
.rp-list{display:flex; flex-direction:column; gap:6px; margin-top:16px}
.rp-opt{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid #E2EAE5; border-radius:12px; cursor:pointer; font-size:14.5px; font-weight:600; color:#10201A}
.rp-opt input{accent-color:#16833F; width:17px; height:17px; margin:0} .rp-opt:has(input:checked){border-color:#16833F; background:#F6FBF8}
.rp-det{width:100%; box-sizing:border-box; margin-top:10px; border:1.5px solid #E2EAE5; border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; resize:vertical}

.pc-report{color:#16833F!important}
/* post menu icons */
.pc-menu .bk-em-menu a{display:flex; align-items:center; gap:10px}
.pc-menu .bk-em-menu .mi{width:18px; height:18px; flex:none; color:#8A968F}
.pc-menu .bk-em-menu a:hover .mi{color:#10201A}
.pc-menu .bk-em-menu a.pc-report,.pc-menu .bk-em-menu a.pc-del{color:#16833F!important; border-top:1px solid #F0F2F5; margin-top:4px; padding-top:12px}
.pc-menu .bk-em-menu a.pc-report .mi,.pc-menu .bk-em-menu a.pc-del .mi{color:#16833F}
.pc-menu .bk-em-menu a{font-size:14.5px!important; font-weight:500!important}

/* ═══ No horizontal jump: always reserve the scrollbar's space ═══
   Pages that are shorter than the window (no scrollbar) and pages that lock scrolling (dialogs, mobile menu,
   login modal) used to shift everything ~15px sideways. Reserving the gutter keeps the layout still. */
html{scrollbar-gutter:stable; overflow-y:scroll}
@supports (scrollbar-gutter:stable){ html{overflow-y:auto} }
html.ui-lock{overflow:hidden}

/* ═══ Global: no focus ring / focus border on form fields (site-wide, one rule set) ═══
   Fields keep exactly their normal (unfocused) look when focused: no browser outline, no focus shadow ring.
   Field-level :focus / :focus-within border/outline/box-shadow changes were removed from the stylesheets.
   (Kept last in the file on purpose.) */
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible,
[contenteditable]:focus, [contenteditable]:focus-visible,
[role="textbox"]:focus, [role="combobox"]:focus, [role="searchbox"]:focus{
  outline:none !important; box-shadow:none !important;
}
input:-moz-focusring, select:-moz-focusring, textarea:-moz-focusring{outline:none !important}
/* account menu icons (landing panel + site header menu) */
.ld-user-panel > a,.bk-user .bk-em-menu a{display:flex!important; align-items:center; gap:12px}
.ld-user-panel .mi,.bk-user .bk-em-menu .mi{width:19px; height:19px; flex:none; color:#8A968F; transition:color .12s}
.ld-user-panel > a:hover .mi,.bk-user .bk-em-menu a:hover .mi{color:#10201A}
.ld-user-panel > a.is-primary .mi,.bk-user .bk-em-menu a.is-primary .mi{color:#16833F} .bk-user .bk-em-menu a.is-primary{color:#16833F}
.ld-user-panel > a.is-muted,.bk-user .bk-em-menu a.is-muted{border-top:1px solid #F0F2F5; margin-top:4px; padding-top:12px} .bk-user .bk-em-menu a.is-muted{color:#5A6962}
.bk-user .bk-em-menu a{font-weight:600}
/* save agency */
.ag-card{position:relative}
.ag-heart{position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:1.5px solid #E2EAE5; background:#fff; color:#8A968F; display:grid; place-items:center; cursor:pointer; z-index:2; transition:all .12s}
.ag-heart svg{width:19px; height:19px} .ag-heart:hover{color:#16833F; border-color:#DDF2E3}
.ag-heart.is-on{color:#16833F; border-color:#DDF2E3; background:#F6FBF8} .ag-heart.is-on svg,.cph-save.is-on svg{fill:currentColor}
.cph-save svg{width:18px; height:18px} .cph-save.is-on{color:#16833F!important; border-color:#DDF2E3!important}
.sv-logo img{object-fit:contain; background:#fff}
.ag-q.ag-heart{position:static; width:38px; height:38px; border:1px solid #E2EAE5; background:#fff}
/* account box inside the site header (same as homepage) */
.bk-top-r{display:flex; align-items:center; gap:14px}
.bk-top-r .ld-quick{margin-right:0}
.bk-top-r .ld-ico{width:44px; height:44px}
.bk-top-r .ld-user-btn{height:48px}
.bk-top-r .ld-user-panel{z-index:80}
.bk-create{white-space:nowrap}

/* ═══ Claim this agency popup ═══ */
.cph-claim{background:#16833F!important; color:#fff!important; border-color:#16833F!important; font-weight:700} .cph-claim:hover{background:#16833F!important} .cph-claim[disabled]{background:#F4F7F5!important; color:#5A6962!important; border-color:#E2EAE5!important; cursor:default}
.clm{position:fixed; inset:0; z-index:1900; display:grid; place-items:center; padding:20px; background:rgba(11,11,15,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .18s}
.clm[hidden]{display:none} .clm.is-in{opacity:1}
.clm-box{width:100%; max-width:860px; max-height:calc(100vh - 40px); display:flex; flex-direction:column; background:#fff; border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:hidden; transform:translateY(12px) scale(.98); transition:transform .2s cubic-bezier(.2,.8,.2,1); color:#10201A}
.clm.is-in .clm-box{transform:none}
.clm-head{display:flex; gap:18px; align-items:flex-start; padding:24px 26px 10px}
.clm-hic{width:64px; height:64px; border-radius:16px; background:#F2FAF4; color:#16833F; display:grid; place-items:center; flex:none} .clm-hic .ic{width:32px; height:32px}
.clm-ht{flex:1; min-width:0} .clm-ht h2{margin:4px 0 6px; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.2} .clm-ht p{margin:0; color:#5A6962; font-size:15px; line-height:1.55; max-width:520px}
.clm-x{width:40px; height:40px; border:0; background:none; border-radius:10px; color:#5A6962; cursor:pointer; display:grid; place-items:center; flex:none} .clm-x:hover{background:#F4F7F5; color:#10201A} .clm-x .ic{width:24px; height:24px}
.clm-body{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:26px; padding:14px 26px 20px; overflow:auto}
.clm-form{display:flex; flex-direction:column; min-width:0}
.clm-l{font-size:14.5px; font-weight:700; margin:14px 0 7px} .clm-l:first-of-type{margin-top:4px} .clm-l b{color:#16833F}
.clm-f{display:flex; align-items:center; height:46px; border:1.5px solid #E2EAE5; border-radius:10px; background:#fff; overflow:hidden} .clm-f.is-ro{background:#F4F7F5}
.clm-fi{width:44px; height:100%; display:grid; place-items:center; color:#5A6962; flex:none} .clm-fi .ic{width:19px; height:19px} .clm-fi.is-red{color:#16833F} .clm-fi.is-wa{color:#1FA855; border-right:1.5px solid #E2EAE5}
.clm-f--ph .clm-fi{border-right:1.5px solid #E2EAE5}
.clm-f input{flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font:inherit; font-size:15px; color:#10201A; padding:0 12px 0 4px}
.clm-f input::placeholder{color:#8A968F}
.clm-f .ip,.clm-f .ip-wrap{flex:1; display:flex; align-items:center; height:100%; border:0!important; box-shadow:none!important; background:transparent}
.clm-h{margin:7px 0 0; font-size:13px; color:#5A6962}
.clm-err{margin:0 0 6px; padding:10px 14px; border-radius:10px; background:#F2FAF4; color:#16833F; font-size:14px; font-weight:600}
.clm-side{background:linear-gradient(180deg,#F6FBF8,#F2FAF4); border-radius:16px; padding:22px 20px; display:flex; flex-direction:column; gap:20px}
.clm-b{display:flex; gap:14px} .clm-bi{width:48px; height:48px; border-radius:50%; background:#E3F4E8; color:#16833F; display:grid; place-items:center; flex:none} .clm-bi .ic{width:24px; height:24px}
.clm-b b{display:block; font-size:15px; margin:2px 0 4px} .clm-b span:last-child{font-size:13.5px; color:#5A6962; line-height:1.5}
.clm-art{margin-top:auto; border-top:1px solid #DDF2E3; padding-top:14px} .clm-art > svg{display:block; width:100%; height:auto}
.clm-script{font-family:Caveat,'Segoe Script','Brush Script MT',cursive; font-size:28px; line-height:1.15; color:#1F2937; transform:rotate(-6deg); margin:-8px 0 0 18px} .clm-script svg{display:block; width:130px; margin:2px 0 0 26px}
.clm-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 26px; border-top:1px solid #EEF3F0}
.clm-sec{display:flex; align-items:center; gap:8px; font-size:13.5px; color:#5A6962} .clm-sec .ic{width:18px; height:18px; flex:none}
.clm-acts{display:flex; gap:12px}
.clm-btn{height:50px; min-width:118px; padding:0 26px; border-radius:12px; border:1.5px solid #D3DED7; background:#fff; color:#10201A; font:inherit; font-weight:700; font-size:16px; cursor:pointer} .clm-btn:hover{background:#F4F7F5}
.clm-btn--red{background:#16833F; border-color:#16833F; color:#fff; min-width:176px} .clm-btn--red:hover{background:#16833F} .clm-btn[disabled]{opacity:.7; cursor:wait}
.clm-done{padding:30px 26px 34px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px} .clm-done h3{margin:6px 0 0; font-size:22px} .clm-done p{margin:0 0 10px; color:#5A6962; max-width:460px; line-height:1.6}
.clm-ok{width:64px; height:64px; border-radius:50%; background:#E8F7EE; color:#1E9E52; display:grid; place-items:center} .clm-ok .ic{width:32px; height:32px}
@media (max-width:820px){ .clm{padding:0; align-items:end} .clm-box{max-height:94vh; border-radius:20px 20px 0 0} .clm-body{grid-template-columns:1fr} .clm-side{display:none} .clm-foot{flex-direction:column; align-items:stretch} .clm-acts{justify-content:stretch} .clm-acts .clm-btn{flex:1} .clm-head{padding:18px 18px 6px} .clm-body{padding:10px 18px 16px} .clm-hic{width:52px; height:52px} }

/* chat list: hover X + dark menu (design A) */
.lv-thw{position:relative; transition:opacity .2s, transform .2s} .lv-thw.is-gone{opacity:0; transform:translateX(24px)}
.lv-thx{position:absolute; top:12px; right:12px; z-index:2; width:26px; height:26px; border-radius:50%; border:0; background:#16833F; color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; transform:scale(.8); transition:opacity .12s, transform .12s; box-shadow:0 0 0 3px rgba(22,131,63,.25)}
.lv-thx svg{width:12px; height:12px}
.lv-thw:hover .lv-thx,.lv-thw.is-menu .lv-thx,.lv-thx:focus-visible{opacity:1; transform:none}
.lv-thw:hover .lv-th time,.lv-thw.is-menu .lv-th time{visibility:hidden}
.lv-thw:hover .lv-th,.lv-thw.is-menu .lv-th{background:#10201A}
@media (hover:none){ .lv-thx{opacity:1; transform:none; width:24px; height:24px; background:#10201A; box-shadow:none} .lv-thw .lv-th time{visibility:hidden} }
.lv-pop{position:absolute; z-index:30; width:236px; background:#10201A; border:1px solid #3A4A42; border-radius:14px; padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:2px; animation:lvPop .14s ease}
@keyframes lvPop{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.lv-pop::before{content:""; position:absolute; top:-7px; right:14px; width:14px; height:14px; background:#10201A; border-left:1px solid #3A4A42; border-top:1px solid #3A4A42; transform:rotate(45deg); border-radius:3px}
.lv-pop.is-up::before{top:auto; bottom:-7px; border:0; border-right:1px solid #3A4A42; border-bottom:1px solid #3A4A42}
.lv-pop button{position:relative; display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border:0; border-radius:10px; background:transparent; color:#fff; font:inherit; font-size:14.5px; font-weight:600; text-align:left; cursor:pointer}
.lv-pop button svg{width:18px; height:18px; flex:none}
.lv-pop button:hover,.lv-pop button:focus-visible{background:#3A4A42; outline:0}
.lv-pop button.is-danger{color:#22A94A} .lv-pop button.is-danger:hover{background:rgba(22,131,63,.14)}
.ui-toast-act{border:0; background:none; color:#22A94A; font:inherit; font-weight:800; font-size:14px; cursor:pointer; padding:0 6px}

/* ═══ Broker profile /broker/{slug} ═══ */
.brp{max-width:1180px; margin:0 auto; padding:22px 22px 60px; color:#10201A}
.brp-crumbs{display:flex; gap:8px; align-items:center; font-size:13.5px; color:#5A6962; margin-bottom:14px; flex-wrap:wrap} .brp-crumbs a{color:#5A6962} .brp-crumbs a:hover{color:#16833F} .brp-crumbs b{color:#10201A; font-weight:600}
.brp-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start}
.brp-main,.brp-side{display:flex; flex-direction:column; gap:18px; min-width:0}
.brp-side{position:sticky; top:84px}
.brp-card{background:#fff; border:1px solid #EEF3F0; border-radius:18px; padding:22px 24px; box-shadow:0 1px 2px rgba(17,19,24,.04)}
.brp-card h2{font-size:18px; font-weight:800; margin:0 0 12px; letter-spacing:-.01em}
.brp-hero{padding:0; overflow:hidden}
.brp-cover{height:110px; background:radial-gradient(circle at 85% 20%,rgba(22,131,63,.55),transparent 55%),linear-gradient(120deg,#10201A 30%,#0F5A2B)}
.brp-id{display:flex; gap:20px; padding:0 24px; margin-top:-52px; align-items:flex-end; flex-wrap:wrap}
.brp-av{position:relative; width:124px; height:124px; border-radius:50%; background:linear-gradient(145deg,#DCE7F5,#B8CCE6); border:5px solid #fff; box-shadow:0 6px 20px rgba(0,0,0,.15); display:grid; place-items:center; flex:none; overflow:visible}
.brp-av img{width:100%; height:100%; border-radius:50%; object-fit:cover} .brp-av b{font-size:40px; font-weight:800; color:#1B3A6B}
.brp-dot{position:absolute; right:8px; bottom:8px; width:18px; height:18px; border-radius:50%; background:#22C55E; border:3px solid #fff}
.brp-idt{flex:1; min-width:260px; padding-bottom:4px}
.brp-idt h1{margin:0; font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1.2; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.brp-v{width:24px; height:24px; border-radius:50%; background:#1D9BF0; color:#fff; display:inline-grid; place-items:center} .brp-v .ic{width:14px; height:14px; stroke-width:3}
.brp-role{margin:4px 0 12px; color:#5A6962; font-size:15px} .brp-role a{color:#10201A; font-weight:700} .brp-role a:hover{color:#16833F}
.brp-meta{display:flex; flex-wrap:wrap; gap:8px}
.brp-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:#F4F7F5; font-size:13px; font-weight:600; color:#374151} .brp-pill .ic{width:15px; height:15px; color:#5A6962} .brp-pill img{border-radius:2px}
.brp-pill--ok{background:#E8F7EE; color:#1E7A44} .brp-pill--ok .ic{color:#1E9E52} .brp-pill--on{background:#DCFCE7; color:#15803D}
.brp-acts{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:20px 24px 22px}
.brp-acts-r{margin-left:auto; display:flex; gap:8px}
.brp-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:12px; border:1.5px solid #E2EAE5; background:#fff; color:#10201A; font:inherit; font-weight:700; font-size:14.5px; cursor:pointer; text-decoration:none; transition:all .12s}
.brp-btn .ic{width:18px; height:18px} .brp-btn:hover{border-color:#D3DED7; color:#10201A}
.brp-btn--dark{background:#10201A; border-color:#10201A; color:#fff} .brp-btn--dark:hover{background:#10201A; color:#fff}
.brp-btn--wa{background:#E8F9EE; border-color:#BFEBCF; color:#128C4B} .brp-btn--wa:hover{background:#D5F4E0; color:#0E7A40}
.brp-btn--red{background:#16833F; border-color:#16833F; color:#fff; width:100%} .brp-btn--red:hover{background:#16833F; color:#fff}
.brp-btn--block{width:100%; margin-top:14px}
.brp-ico{width:44px; height:44px; border-radius:50%; border:1.5px solid #E2EAE5; background:#fff; color:#5A6962; display:grid; place-items:center; cursor:pointer} .brp-ico .ic{width:19px; height:19px} .brp-ico:hover{color:#16833F; border-color:#DDF2E3}
.brp-ico.is-on{color:#16833F; border-color:#DDF2E3; background:#F6FBF8} .brp-ico.is-on .ic{fill:currentColor}
.brp-bio{margin:0; font-size:15.5px; line-height:1.7; color:#374151} .brp-empty{margin:0; color:#5A6962; line-height:1.65}
.brp-facts{display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin-top:18px}
.brp-facts h3{margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8A968F}
.brp-chips{display:flex; flex-wrap:wrap; gap:8px}
.brp-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid #E2EAE5; font-size:13.5px; font-weight:600; color:#10201A; background:#fff; text-decoration:none} .brp-chip .ic{width:15px; height:15px; color:#16833F}
a.brp-chip:hover{border-color:#DDF2E3; background:#F6FBF8; color:#16833F} .brp-chip.is-red{background:#F2FAF4; border-color:#F2FAF4; color:#16833F}
.brp-note{margin:16px 0 0; padding:12px 14px; border-radius:12px; background:#F8F9FB; color:#5A6962; font-size:14px}
.brp-post{display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid #F0F2F5; color:#10201A; font-size:14.5px; text-decoration:none} .brp-post:first-of-type{border-top:0} .brp-post time{color:#8A968F; font-size:12.5px; white-space:nowrap} .brp-post:hover span{color:#16833F}
.brp-claim{background:linear-gradient(180deg,#F6FBF8,#F2FAF4); border-color:#E3F4E8} .brp-claim p{color:#5A6962; font-size:14.5px; line-height:1.6; margin:0 0 16px}
.brp-claim-ic{width:48px; height:48px; border-radius:14px; background:#fff; color:#16833F; display:grid; place-items:center; margin-bottom:12px} .brp-claim-ic .ic{width:26px; height:26px}
.brp-claim.is-flash{animation:brpFlash 1.2s ease 2} @keyframes brpFlash{50%{box-shadow:0 0 0 6px rgba(22,131,63,.25)}}
.brp-ag-top{display:flex; gap:12px; align-items:center; color:#10201A; text-decoration:none} .brp-ag-top b{display:block; font-size:15.5px} .brp-ag-top small{color:#5A6962; font-size:13px}
.brp-ag-logo{width:52px; height:52px; border-radius:12px; background:#10201A; color:#fff; font-weight:800; font-size:20px; display:grid; place-items:center; overflow:hidden; flex:none} .brp-ag-logo img{width:100%; height:100%; object-fit:contain; background:#fff}
.brp-mini{display:flex; gap:12px; align-items:center; padding:9px 0; color:#10201A; text-decoration:none; border-top:1px solid #F4F7F5} .brp-mini:first-of-type{border-top:0}
.brp-mini b{display:block; font-size:14px} .brp-mini small{color:#8A968F; font-size:12.5px} .brp-mini:hover b{color:#16833F}
.brp-mini-av{width:40px; height:40px; border-radius:50%; background:#E6EEF8; color:#1B3A6B; font-weight:800; font-size:13px; display:grid; place-items:center; overflow:hidden; flex:none} .brp-mini-av img{width:100%; height:100%; object-fit:cover}
.brp-more{display:block; margin-top:10px; font-weight:700; font-size:14px; color:#16833F}
@media (max-width:980px){ .brp-grid{grid-template-columns:1fr} .brp-side{position:static} }
@media (max-width:600px){ .brp{padding:14px 12px 90px} .brp-card{padding:18px} .brp-id{padding:0 18px} .brp-av{width:104px; height:104px} .brp-idt h1{font-size:23px} .brp-acts{padding:16px 18px} .brp-acts-r{margin-left:0} .brp-btn{flex:1 1 auto} .brp-facts{grid-template-columns:1fr} }
.brp-id{align-items:flex-start} .brp-idt{padding-top:62px}
@media (max-width:600px){ .brp-id{flex-direction:column; gap:10px} .brp-idt{padding-top:0; min-width:0} }

/* ═══ Messages page (/messages) ═══ */
body.is-msg-page #lvBubble, body.is-msg-page .lv-bubble, body.is-msg-page .lv-panel{display:none!important}
.msg{--h:calc(100vh - 118px); display:grid; grid-template-columns:360px minmax(0,1fr); height:var(--h); min-height:520px; max-width:1240px; margin:22px auto; background:#fff; border:1px solid #EEF3F0; border-radius:20px; overflow:hidden; box-shadow:0 1px 2px rgba(17,19,24,.04); color:#10201A}
.msg-list{display:flex; flex-direction:column; border-right:1px solid #EEF3F0; min-height:0}
.msg-list-h{padding:20px 18px 12px}
.msg-list-h h1{margin:0 0 12px; font-size:22px; font-weight:800; letter-spacing:-.02em}
.msg-search{display:flex; align-items:center; gap:10px; height:42px; padding:0 14px; background:#F4F7F5; border-radius:12px; color:#8A968F} .msg-search svg{width:18px; height:18px; flex:none}
.msg-search input{flex:1; border:0; background:none; outline:0; font:inherit; font-size:14.5px; color:#10201A; min-width:0} .msg-search input::-webkit-search-cancel-button{display:none}
.msg-threads{flex:1; overflow-y:auto; padding:4px 10px 12px}
.msg-row{position:relative; border-radius:14px; transition:opacity .2s, transform .2s} .msg-row.is-gone{opacity:0; transform:translateX(-16px)}
.msg-row-b{display:flex; gap:12px; align-items:center; width:100%; padding:11px 10px; border:0; background:none; border-radius:14px; cursor:pointer; text-align:left; font:inherit; color:inherit}
.msg-row:hover .msg-row-b{background:#F7F8FA} .msg-row.is-on .msg-row-b{background:#F2FAF4}
.msg-row-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.msg-row-1{display:flex; justify-content:space-between; gap:8px; align-items:baseline} .msg-row-1 b{font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .msg-row-1 time{font-size:12px; color:#8A968F; white-space:nowrap}
.msg-row-2{display:flex; align-items:center; gap:6px; font-size:13.5px; color:#5A6962; min-width:0} .msg-row-2 span{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.msg-row-2 i{font-style:normal; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#16833F; color:#fff; font-size:11.5px; font-weight:800; display:grid; place-items:center}
.msg-row.is-unread .msg-row-1 b,.msg-row.is-unread .msg-row-2 span{color:#10201A; font-weight:700} .msg-row.is-unread time{color:#16833F; font-weight:700}
.msg-tick{width:16px; height:16px; flex:none; color:#8A968F} .msg-tick.is-read{color:#1E9E52}
.msg-row-x{position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; border:0; background:#16833F; color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; transform:scale(.8); transition:opacity .12s, transform .12s}
.msg-row-x svg{width:11px; height:11px} .msg-row:hover .msg-row-x,.msg-row-x:focus-visible{opacity:1; transform:none} .msg-row:hover time{visibility:hidden}
@media (hover:none){ .msg-row-x{opacity:1; transform:none; background:#EEF3F0; color:#5A6962} .msg-row time{visibility:hidden} }
.msg-av{width:48px; height:48px; border-radius:50%; background:linear-gradient(145deg,#E6EEF8,#CFDDF0); color:#1B3A6B; font-weight:800; font-size:15px; display:grid; place-items:center; flex:none; overflow:hidden} .msg-av img{width:100%; height:100%; object-fit:cover}
.msg-av--lg{width:44px; height:44px}
.msg-none,.msg-loading{padding:40px 16px; text-align:center; color:#8A968F; font-size:14px; line-height:1.6} .msg-none a{color:#16833F; font-weight:700}
.msg-skel{height:62px; margin:6px 0; border-radius:14px; background:linear-gradient(90deg,#F4F7F5,#F4F7F5,#F4F7F5); background-size:200% 100%; animation:msgSk 1.2s infinite} @keyframes msgSk{to{background-position:-200% 0}}
.msg-chat{display:flex; flex-direction:column; min-width:0; min-height:0; background:#F4F7F5}
.msg-empty{margin:auto; text-align:center; padding:40px 24px; max-width:380px} .msg-empty h2{margin:14px 0 6px; font-size:20px} .msg-empty p{margin:0 0 18px; color:#5A6962; line-height:1.6}
.msg-empty-ic{width:72px; height:72px; border-radius:22px; background:#F2FAF4; color:#16833F; display:inline-grid; place-items:center} .msg-empty-ic svg{width:34px; height:34px}
.msg-pane{display:flex; flex-direction:column; flex:1; min-height:0}
.msg-head{display:flex; align-items:center; gap:12px; padding:14px 18px; background:#fff; border-bottom:1px solid #EEF3F0}
.msg-back{display:none; width:38px; height:38px; border:0; background:none; border-radius:10px; color:#10201A; cursor:pointer} .msg-back svg{width:22px; height:22px}
.msg-head-t{flex:1; min-width:0; display:flex; flex-direction:column} .msg-head-t a{font-size:16px; font-weight:800; color:#10201A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none} .msg-head-t a[href]:hover{color:#16833F} .msg-head-t small{font-size:12.5px; color:#8A968F}
.msg-head-a{display:flex; gap:8px}
.msg-ico{width:40px; height:40px; border-radius:50%; border:1px solid #E2EAE5; background:#fff; color:#374151; display:grid; place-items:center; cursor:pointer} .msg-ico svg{width:19px; height:19px} .msg-ico:hover{border-color:#D3DED7; color:#10201A} .msg-ico[hidden]{display:none}
#msgWa{color:#1FA855}
.msg-log{flex:1; overflow-y:auto; padding:18px 22px 8px; display:flex; flex-direction:column; gap:6px}
.msg-day{display:flex; justify-content:center; margin:10px 0 4px} .msg-day span{padding:4px 12px; border-radius:999px; background:#EEF3F0; color:#5A6962; font-size:12px; font-weight:700}
.msg-b{max-width:min(72%,560px); align-self:flex-start; background:#fff; border:1px solid #EEF3F0; border-radius:16px 16px 16px 6px; padding:9px 13px 7px; box-shadow:0 1px 1px rgba(17,19,24,.03)}
.msg-b p{margin:0; font-size:15px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word} .msg-b time{display:block; text-align:right; font-size:11px; color:#8A968F; margin-top:3px}
.msg-b.is-me{align-self:flex-end; background:#16833F; border-color:#16833F; color:#fff; border-radius:16px 16px 6px 16px} .msg-b.is-me time{color:rgba(255,255,255,.75)}
.msg-sys{align-self:center; font-size:12.5px; color:#8A968F; padding:4px 10px}
.msg-start{margin:auto; max-width:360px; text-align:center; color:#5A6962; font-size:14px; line-height:1.6}
.msg-typing{display:flex; gap:4px; padding:4px 26px 8px} .msg-typing i{width:7px; height:7px; border-radius:50%; background:#D3DED7; animation:msgTy 1s infinite} .msg-typing i:nth-child(2){animation-delay:.15s} .msg-typing i:nth-child(3){animation-delay:.3s} @keyframes msgTy{50%{transform:translateY(-4px); background:#8A968F}}
.msg-typing[hidden],.msg-blocked[hidden],.msg-form[hidden],.msg-pane[hidden],.msg-empty[hidden]{display:none}
.msg-blocked{margin:0 18px 16px; padding:12px 14px; border-radius:12px; background:#F4F7F5; color:#5A6962; font-size:14px; text-align:center}
.msg-form{display:flex; align-items:flex-end; gap:10px; padding:12px 16px 16px; background:#fff; border-top:1px solid #EEF3F0}
.msg-form textarea{flex:1; min-height:46px; max-height:140px; resize:none; border:1.5px solid #E2EAE5; border-radius:14px; padding:12px 14px; font:inherit; font-size:15px; line-height:1.4; color:#10201A; background:#fff; box-sizing:border-box}
.msg-send{width:46px; height:46px; border-radius:50%; border:0; background:#16833F; color:#fff; display:grid; place-items:center; cursor:pointer; flex:none} .msg-send svg{width:20px; height:20px} .msg-send:hover{background:#16833F}
.msg-btn{display:inline-flex; align-items:center; height:44px; padding:0 20px; border-radius:12px; font-weight:700; text-decoration:none} .msg-btn--red{background:#16833F; color:#fff!important} .msg-btn--red:hover{background:#16833F}
.msg-pop{z-index:1500}
@media (max-width:860px){
  .msg{grid-template-columns:1fr; margin:0; border-radius:0; border:0; --h:calc(100vh - 128px)}
  .msg-chat{display:none} .msg.is-open .msg-list{display:none} .msg.is-open .msg-chat{display:flex}
  .msg-back{display:grid; place-items:center} .msg-log{padding:14px 12px} .msg-b{max-width:84%}
}
@media (max-width:860px){ .msg{--h:calc(100vh - 212px); height:calc(100dvh - 212px); min-height:420px} .msg-list-h{padding:16px 14px 10px} .msg-threads{padding:4px 6px 12px} }

/* ═══ Unified icons (sprite: views/site/_icons.php · helper ui_icon()) ═══ */
.ui-ic{display:inline-block; width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; color:inherit}
.ui-ic--whatsapp{color:#25D366}                                   /* brand green on light surfaces */
.ui-verified{color:#16833F; width:1.05em; height:1.05em; vertical-align:-.15em}   /* red rosette, white tick */
/* inside filled buttons the icon takes the button's text colour */
.bc-btn--wa .ui-ic--whatsapp,.rq-btn--wa .ui-ic--whatsapp,.brp-btn--wa .ui-ic--whatsapp.is-solid,.btn-wa .ui-ic--whatsapp,.doc-cbtn--wa .ui-ic--whatsapp,.pc-act--wa .ui-ic--whatsapp{color:currentColor}
.rq-btn,.bc-btn,.sv-b-a a,.sv-b-a button{display:inline-flex; align-items:center; justify-content:center; gap:7px}
.rq-btn .ui-ic,.bc-btn .ui-ic{width:17px; height:17px}
/* verified badge placements */
.brp-v{background:none!important; width:auto!important; height:auto!important} .brp-v .ui-verified{width:26px; height:26px}
.bc-vtick{background:#fff!important; border-radius:50%; padding:1px; display:grid; place-items:center} .bc-vtick .ui-verified{width:100%; height:100%}
.ch-ver{background:none!important} .ch-ver .ui-verified{width:16px; height:16px}
.bc-verified,.ag-badge--v,.agency-vpill,.cph-vpill,.badge-verified{display:inline-flex!important; align-items:center; gap:5px}
.bc-verified .ui-verified,.ag-badge--v .ui-verified,.agency-vpill .ui-verified,.badge-verified .ui-verified{width:15px; height:15px}
.cph-vpill .ui-verified{width:18px; height:18px}
.pc-name .ui-verified,.pf-b h1 .ui-verified{width:17px; height:17px; margin-left:3px}
/* WhatsApp buttons: brand green, white icon on solid, green icon on outline */
.bc-btn--wa,.rq-btn--wa,.brp-btn--wa{gap:7px}
.clm-fi.is-wa .ui-ic,.ff-ico-wa .ui-ic{color:#25D366}
.msg-ico .ui-ic{width:19px; height:19px} #msgWa .ui-ic{color:#25D366}
.cph-btn .ui-ic,.cps-btn .ui-ic{width:18px; height:18px}
/* verified = one look everywhere: red rosette; pills tinted to match */
.bc-verified,.ag-badge--v,.agency-vpill,.cph-vpill,.badge-verified{background:#F2FAF4!important; color:#16833F!important}
.bc-avatar.is-verified{box-shadow:0 0 0 4px #fff, 0 0 0 6px #16833F, 0 10px 24px rgba(22,131,63,.18)!important}
/* agent cards (agency page + dashboard preview) and review badges: same supplied rosette */
.doc-tick{background:none!important; width:20px!important; height:20px!important}
.doc-tick .ui-verified,.doc-tick svg{width:20px!important; height:20px!important}
.rv-badge .ui-verified,.badge-verified .ui-verified{width:15px; height:15px}
.doc-photo .doc-ini{background:none!important; box-shadow:none!important}

/* ═══ 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}
.lv-bubble{box-shadow:0 12px 30px rgba(22,131,63,.42)!important}

/* ═══ 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}
/* agencies page: list + Online Agencies column */
.ag-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start}
.ag-ol{position:sticky;top:var(--top,78px);height:calc(100vh - var(--top,78px));border-left:1px solid #EEF3F0;background:#fff}
@media (max-width:1280px){ .ag-wrap{grid-template-columns:1fr} .ag-ol{display:none} }
.cph-chat{background:#16833F!important;color:#fff!important;border-color:#16833F!important;display:inline-flex;align-items:center;gap:7px}.cph-chat:hover{background:#16833F!important}.cph-chat .ui-ic{color:#fff}
.lv-sys{align-self:center;margin:8px auto;max-width:88%;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.08);color:#D3DED7;font-size:12.5px;text-align:center;line-height:1.45}
/* ═══ Chat privacy settings ═══ */
.cpv{display:flex;flex-direction:column;gap:14px}
.cpv-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border:1px solid #E2EAE5;border-radius:14px;background:#fff}
.cpv-row b,.cpv-opt b{display:block;font-size:14.5px;color:#10201A}.cpv-row small,.cpv-opt small{display:block;font-size:12.5px;color:#5A6962;margin-top:2px;line-height:1.45}
.cpv-main{background:#F6FBF8;border-color:#E3F4E8}
.cpv-sw{position:relative;width:48px;height:28px;flex:none}.cpv-sw input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:1;margin:0}
.cpv-sw span{position:absolute;inset:0;border-radius:99px;background:#D3DED7;transition:.2s}.cpv-sw span:after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.cpv-sw input:checked+span{background:#16833F}.cpv-sw input:checked+span:after{transform:translateX(20px)}
.cpv-set{border:1px solid #E2EAE5;border-radius:14px;padding:12px 14px 14px;margin:0;display:flex;flex-direction:column;gap:6px;background:#fff}
.cpv-set.is-off{opacity:.45}.cpv-set legend{font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#5A6962;padding:0 6px}.cpv-set legend small{text-transform:none;letter-spacing:0;font-weight:600}
.cpv-opt{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-radius:10px;cursor:pointer}.cpv-opt:hover{background:#F7F8FA}.cpv-opt input{margin-top:3px;accent-color:#16833F;width:17px;height:17px;flex:none}
.cpv-opt[hidden],.cpv-countries[hidden],.cpv-hours[hidden]{display:none}
.cpv-countries{border:1px solid #EEF3F0;border-radius:12px;padding:10px;margin:4px 0}.cpv-find{width:100%;height:38px;border:1px solid #E2EAE5;border-radius:10px;padding:0 12px;font:inherit;margin-bottom:8px;box-sizing:border-box}
.cpv-clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 10px;max-height:220px;overflow:auto;font-size:13.5px}.cpv-clist label{display:flex;gap:7px;align-items:center;padding:3px 0}.cpv-clist label[hidden]{display:none}.cpv-clist input{accent-color:#16833F}
.cpv-hint{margin:4px 6px 0;font-size:12.5px;color:#5A6962}
.cpv-hours{display:flex;flex-direction:column;gap:12px;padding:6px}
.cpv-days{display:flex;gap:6px;flex-wrap:wrap}.cpv-days input{display:none}.cpv-days span{display:inline-block;padding:7px 12px;border-radius:99px;border:1.5px solid #E2EAE5;font-weight:700;font-size:13px;cursor:pointer}.cpv-days input:checked+span{background:#F2FAF4;border-color:#16833F;color:#16833F}
.cpv-times{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;font-weight:600}.cpv-times input{height:38px;border:1px solid #E2EAE5;border-radius:10px;padding:0 10px;font:inherit;margin-left:6px}
.cpv-away{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600}.cpv-away textarea{border:1px solid #E2EAE5;border-radius:10px;padding:10px 12px;font:inherit;font-weight:400;resize:vertical}
.cpv-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.cpv-save{height:44px;padding:0 22px;border:0;border-radius:12px;background:#16833F;color:#fff;font-weight:800;cursor:pointer}.cpv-save:hover{background:#16833F}.cpv-note{font-size:12.5px;color:#5A6962;flex:1;min-width:220px}
.cpv-blocked{margin-top:18px;border-top:1px solid #EEF3F0;padding-top:14px}.cpv-blocked h4{margin:0 0 8px;font-size:15px}.cpv-blocked h4 small{color:#8A968F;font-weight:600}
.cpv-brow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #EEF3F0}.cpv-brow b{display:block;font-size:14px}.cpv-brow small{color:#8A968F;font-size:12px}
.cpv-brow button{height:34px;padding:0 14px;border-radius:10px;border:1px solid #E2EAE5;background:#fff;font-weight:700;cursor:pointer}.cpv-brow button:hover{border-color:#16833F;color:#16833F}
.lv-note{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:3000;max-width:min(520px,92vw);padding:13px 18px;border-radius:14px;background:#10201A;color:#fff;font-size:14px;line-height:1.45;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:opacity .35s}
.lv-note.is-out{opacity:0}

/* ═══ Auto-save (no Save buttons) ═══ */
form[data-autosave]{position:relative}
form[data-autosave] [type=submit]:not([data-keep]),form[data-autosave] .as-hide{display:none!important}
.as-pill{position:sticky;top:12px;z-index:30;float:right;margin:0 0 8px 12px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.3;box-shadow:0 4px 14px rgba(17,19,24,.08);transition:opacity .4s;max-width:min(420px,90%)}
.as-pill[hidden]{display:none}
.as-pill.is-busy{background:#F4F7F5;color:#5A6962}.as-pill.is-busy:before{content:'';width:10px;height:10px;border-radius:50%;border:2px solid #AEB9B2;border-top-color:#16833F;animation:asSpin .7s linear infinite}
.as-pill.is-ok{background:#E8F7EE;color:#15803D}.as-pill.is-fade{opacity:0}
.as-pill.is-err{background:#F2FAF4;color:#16833F}.as-pill.is-warn{background:#FEF3C7;color:#92400E}
@keyframes asSpin{to{transform:rotate(360deg)}}

/* ═══ Feed "live pulse" dot (option A) ═══ */
a[data-feed-dot]{position:relative}
.fd-livedot{position:absolute;top:7px;right:7px;width:9px;height:9px;pointer-events:none}
.fd-livedot i,.fd-livedot b{position:absolute;inset:0;border-radius:50%;background:#16833F}
.fd-livedot b{box-shadow:0 0 0 2px #10201A}
.fd-livedot i{animation:fdPing 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes fdPing{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(2.6);opacity:0}}
/* sidebar row: dot at the right end */
.bk-nav a[data-feed-dot] .fd-livedot,aside a[data-feed-dot]:not(.ld-ico) .fd-livedot{top:50%;right:14px;margin-top:-4.5px}
aside a[data-feed-dot]:not(.ld-ico) .fd-livedot b{box-shadow:none}
/* phone bottom bar: dot on the icon */
.appbar a[data-feed-dot] .fd-livedot{top:6px;right:calc(50% - 16px)}
.appbar a[data-feed-dot] .fd-livedot b{box-shadow:0 0 0 2px #10201A}
@media (prefers-reduced-motion:reduce){.fd-livedot i{animation:none;opacity:0}}
/* live-pulse fine-tuning */
a.ld-ico[data-feed-dot] .fd-livedot{top:5px;right:5px;width:8px;height:8px}
.appbar a[data-feed-dot] .fd-livedot{top:5px;right:calc(50% - 15px);width:8px;height:8px}
/* new posts: the feed icon turns red and nudges once */
a[data-feed-dot].fd-new svg,a[data-feed-dot].fd-new .ic-feed{color:#16833F}
a[data-feed-dot].fd-new svg{stroke:#16833F}
a.ld-ico[data-feed-dot].fd-new{border-color:rgba(22,131,63,.55);background:rgba(22,131,63,.12)}
a[data-feed-dot].fd-nudge svg{animation:fdNudge .85s cubic-bezier(.36,.07,.19,.97)}
@keyframes fdNudge{0%,100%{transform:translateY(0) rotate(0)}15%{transform:translateY(-3px) rotate(-7deg)}35%{transform:translateY(0) rotate(6deg)}55%{transform:translateY(-2px) rotate(-4deg)}75%{transform:translateY(0) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){a[data-feed-dot].fd-nudge svg{animation:none}}
/* V15.2 — homepage "post a requirement" */
.hm-req{display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; background:#fff; border:1px solid #E2EAE5; border-radius:20px; padding:30px; box-shadow:0 10px 30px rgba(17,19,24,.06)}
.hm-req .hm-req-eyebrow{margin:0 0 6px; color:var(--red,#16833F); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.06em}
.hm-req h2{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.2}
.hm-req-copy>p{color:#5A6962; font-size:15px; margin:10px 0 0; max-width:560px}
.hm-req-steps{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px}
.hm-req-steps li{display:flex; gap:12px; align-items:center; font-size:14.5px; color:#10201A}
.hm-req-steps b{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#F2FAF4; color:var(--red,#16833F); font-size:13px}
.hm-req-form{display:grid; gap:12px; background:#F7F8FA; border-radius:16px; padding:20px}
.hm-req-seg{display:grid; grid-template-columns:1fr 1fr; background:#E9EBF0; border-radius:12px; padding:4px}
.hm-req-seg input{position:absolute; opacity:0; pointer-events:none}
.hm-req-seg span{display:block; text-align:center; padding:10px; border-radius:9px; font-weight:700; cursor:pointer; color:#5A6962}
.hm-req-seg input:checked+span{background:#fff; color:#10201A; box-shadow:0 1px 4px rgba(17,19,24,.12)}
.hm-req-seg input:focus-visible+span{outline:2px solid var(--red,#16833F); outline-offset:2px}
.hm-req-f{display:grid; gap:5px; font-size:13px; font-weight:700; color:#5A6962}
.hm-req-f select{height:46px; border:1px solid #D3DED7; border-radius:10px; padding:0 12px; font:inherit; font-size:15px; font-weight:500; color:#10201A; background:#fff}
.hm-req-go{height:50px; border:0; border-radius:12px; background:var(--red,#16833F); color:#fff; font-weight:800; font-size:16px; cursor:pointer}
.hm-req-go:hover{filter:brightness(.95)}
.hm-req-form small{text-align:center; color:#8A968F; font-size:12.5px}
@media (max-width:900px){ .hm-req{grid-template-columns:1fr; padding:20px; gap:18px} .hm-req h2{font-size:22px} }
.brp-chip--focus{background:#F2FAF4; color:#12703A; border-color:#E3F4E8; font-weight:700}   /* V15.8 main focus */
/* V16.6 — Feed icon: list card with a red dot that always shows and pulses (bounce + a fading ring) */
.fi-dot{transform-box:fill-box; transform-origin:center; animation:fiDot 1.8s ease-in-out infinite}
.fi-ring{transform-box:fill-box; transform-origin:center; animation:fiRing 1.8s ease-out infinite}
@keyframes fiDot{0%,100%{transform:scale(1)} 20%{transform:scale(1.18)} 40%{transform:scale(.94)} 60%{transform:scale(1.04)}}
@keyframes fiRing{0%{transform:scale(1); opacity:.55} 100%{transform:scale(2.3); opacity:0}}
@media (prefers-reduced-motion:reduce){ .fi-dot,.fi-ring{animation:none} .fi-ring{opacity:0} }
a[data-feed-dot] .fd-livedot{display:none}   /* the icon has its own dot now — no second dot when there are new posts */
a[data-feed-dot].fd-new .fi-dot,a[data-feed-dot].fd-new .fi-ring{fill:#16833F}
/* V16.7 — home hero: "Find the right" + a rotating second line */
.hm-hero h1.hm-h1{max-width:none}
.hm-h1-a{display:block}
.hm-rot{position:relative; display:block; height:1.12em; overflow:hidden}
.hm-rot > span{position:absolute; left:0; top:0; white-space:nowrap; opacity:0; transform:translateY(100%);
  transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s cubic-bezier(.2,.8,.2,1)}
.hm-rot > span.is-on{opacity:1; transform:translateY(0)}
.hm-rot > span.is-out{opacity:0; transform:translateY(-100%)}
.hm-rot > span.is-in{transition:none; opacity:0; transform:translateY(100%)}
.hm-rot b{font-weight:inherit; color:#fff}
@media (max-width:760px){   /* phones: the longest phrase takes two lines — reserve both so the page never jumps */
  .hm-rot{height:2.2em} .hm-rot > span{white-space:normal; right:0}
}
@media (prefers-reduced-motion:reduce){ .hm-rot > span,.hm-rot > span.is-out,.hm-rot > span.is-in{transform:none} .hm-rot > span{transition:opacity .4s} }
/* V16.7 — sized so the longest phrase ("broker who speaks your language.") stays on one line beside the DUBAI label */
body.bk-site .ld-hero h1.hm-h1{font-size:clamp(34px,4vw,62px); line-height:1.04}
body.bk-site .ld-hero h1.hm-h1 .hm-rot{height:1.14em}
@media (max-width:760px){ body.bk-site .ld-hero h1.hm-h1 .hm-rot{height:2.2em} }
/* V16.9 — header search: typing placeholder */
.gs-ph{position:absolute; z-index:1; display:flex; align-items:center; white-space:nowrap; overflow:hidden; pointer-events:none; color:rgba(255,255,255,.5)}
.gs-ph[hidden]{display:none}
.gs-ph-w{font-weight:500; color:#E2EAE5; margin-left:.3em}
.gs-ph-c{display:inline-block; width:2px; height:1.1em; background:#16833F; margin-left:2px; animation:gsBlink 1s steps(1) infinite}
.gs-ph-x{font-style:normal; color:rgba(255,255,255,.38); margin-left:.6em; opacity:0; transition:opacity .45s} .gs-ph-x.on{opacity:1}
@keyframes gsBlink{50%{opacity:0}}
.gs-menu .gs-alert{margin-top:4px; background:#F2FBF5} .gs-menu .gs-alert:hover,.gs-menu .gs-alert.is-sel{background:#E6F6EC}   /* V17.1: alert row (ringing bell) */
.gs-menu .gs-alert .gs-t{color:#127A45} .gs-menu .gs-alert small{color:#3F7A57}
.gs-menu .gs-alert:hover .gs-ic svg{animation:gsRing .6s ease-in-out} @keyframes gsRing{20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){ .gs-menu .gs-alert:hover .gs-ic svg{animation:none} }
.brp-chip.brp-chip--help{background:#EEF9F2; color:#127A45; border-color:#CDEBD8; font-weight:700}   /* V18.6 */
/* V19.5 — header Feed button: latest active members slide up, the red dot pops as each one arrives */
.fx{position:relative; width:34px; height:34px; border-radius:50%; overflow:hidden; display:block}
.fx-track{position:absolute; left:0; top:0; width:100%; display:flex; flex-direction:column; transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.fx-av{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font:800 11px/1 Inter,system-ui,sans-serif; color:#fff; overflow:hidden}
.fx-av img{width:100%; height:100%; object-fit:cover}
.fx-c0{background:#4F7FD8} .fx-c1{background:#16833F} .fx-c2{background:#2FA56B} .fx-c3{background:#D9922B} .fx-c4{background:#7B61D1}
.fx-dot{position:absolute; top:0; right:0; width:12px; height:12px; border-radius:50%; background:#16833F; border:2px solid #10201A; z-index:2}
.fx-dot::after{content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid #16833F; opacity:0}
.fx-dot.is-pop{animation:fxPop .6s cubic-bezier(.2,.8,.2,1)}
.fx-dot.is-pop::after{animation:fxRing .8s ease-out}
@keyframes fxPop{0%{transform:scale(.4)} 45%{transform:scale(1.35)} 70%{transform:scale(.9)} 100%{transform:scale(1)}}
@keyframes fxRing{0%{opacity:.7; transform:scale(1)} 100%{opacity:0; transform:scale(2.6)}}
@media (prefers-reduced-motion:reduce){ .fx-track{transition:none} .fx-dot.is-pop, .fx-dot.is-pop::after{animation:none} }
a[data-feed-dot].fd-new .fx{box-shadow:0 0 0 2px #16833F}   /* new posts: a red ring around the avatars */
/* V19.6 — avatars fill the whole Feed button circle (no gap) */
a[data-feed-dot] .fx{position:absolute; inset:0; width:auto; height:auto; border-radius:50%}
a[data-feed-dot] .fx-av{width:100%; height:auto; aspect-ratio:1 / 1; font-size:13px}
a[data-feed-dot] .fx-dot{top:-2px; right:-2px}
/* V20.1 — clean wordmark: "Bookingo" + red dot, letter-spaced tagline (no icon in the header) */
.pw{display:inline-flex; flex-direction:column; gap:6px; line-height:1}
.pw-n{font:800 26px/1 Inter,system-ui,sans-serif; letter-spacing:-.03em; color:#fff; display:inline-flex; align-items:baseline; white-space:nowrap}
.pw-d{display:inline-block; width:.24em; height:.24em; border-radius:50%; background:#16833F; margin-left:.06em}
.pw-t{font:600 9.5px/1 Inter,system-ui,sans-serif; letter-spacing:.34em; text-transform:uppercase; color:#D3DED7; white-space:nowrap}
.ld-brand .pw-n{font-size:30px} .ld-brand .pw-t{font-size:10.5px}
.bk-brand, .ld-brand{text-decoration:none}
@media (max-width:600px){ .pw-n, .ld-brand .pw-n{font-size:22px} .pw-t, .ld-brand .pw-t{font-size:8px; letter-spacing:.28em} .pw{gap:5px} }
/* V20.2 — rotating headline: phrases wrap when they don't fit (the box is sized to the tallest one by JS) and slide fully
   out of the box, so two phrases never show at once and nothing is cut off at the right. */
body.bk-site .ld-hero h1.hm-h1 .hm-rot{height:auto; min-height:1.14em}
.hm-rot > span{white-space:normal; right:0}
.hm-rot > span.is-out{transform:translateY(-2.6em)}
.hm-rot > span.is-in, .hm-rot > span:not(.is-on):not(.is-out){transform:translateY(2.6em)}
@media (prefers-reduced-motion:reduce){ .hm-rot > span, .hm-rot > span.is-out, .hm-rot > span.is-in, .hm-rot > span:not(.is-on):not(.is-out){transform:none} }
.hm-rot > span.is-out{transition-duration:.45s}
.hm-rot > span.is-on{transition-delay:.28s}   /* V20.2: the next phrase comes in once the previous one has left (no overlap on 2-line phones) */
/* V20.4 — the chat widget respects "hidden" on every page (the agency dashboard doesn't load brokers.css, whose global
   [hidden] rule kept it closed elsewhere — so an empty chat panel sat open over every dashboard page) */
.lv [hidden], .lv-panel[hidden], #lvPanel[hidden]{display:none!important}
/* V20.4 — agency sidebar "Need help?" card readable on the dark sidebar (its title was dark-on-dark) */
.dside-help{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10)}
.dside-help b{color:#fff}
.dside-help span{color:#AEB9B2}
.dside-help-ic{background:rgba(22,131,63,.16); color:#16833F}
.dside-help-btn{background:#16833F; border-color:#16833F; color:#fff}
.dside-help-btn:hover{background:#16833F; color:#fff}
/* V20.6 — rotating headline, stable "slot machine": the outgoing phrase moves up exactly one box height while the next
   comes up from exactly one box below, together, at the same calm speed — never blank, never two phrases on top of
   each other (replaces V20.2's 2.6em jump + delay, which left the line empty ~15% of the time). */
.hm-rot > span{transition:transform .8s cubic-bezier(.65,0,.35,1), opacity .8s ease}
.hm-rot > span.is-on{transition-delay:0s; opacity:1; transform:translateY(0)}
.hm-rot > span.is-out{transition-duration:.8s; opacity:0; transform:translateY(calc(var(--h, 1.14em) * -1))}
.hm-rot > span.is-in, .hm-rot > span:not(.is-on):not(.is-out){transition:none; opacity:0; transform:translateY(var(--h, 1.14em))}
.hm-rot > span.is-out{opacity:.0}
@media (prefers-reduced-motion:reduce){ .hm-rot > span, .hm-rot > span.is-on, .hm-rot > span.is-out{transition:opacity .4s; transform:none} }
.hm-rot > span.is-on, .hm-rot > span.is-out{opacity:1; transition:transform .8s cubic-bezier(.65,0,.35,1)}   /* V20.6: solid text, the box edges clip it — no fading gap */
@media (prefers-reduced-motion:reduce){ .hm-rot > span.is-out{opacity:0; transition:opacity .4s; transform:none} .hm-rot > span.is-on{transition:opacity .4s; transform:none} }
/* ═══ V21.9 — phone header: logo + search icon + menu; search expands in place; menus slide in from the right;
       the header hides while scrolling down and comes back on scroll up. Desktop unchanged. ═══ */
.hd-sbtn, .hd-sclose{display:none}
@media (max-width:900px){
  body .ld-top, body .bk-top{display:flex!important; align-items:center; gap:10px; height:auto!important; min-height:60px; padding:10px 14px!important;
    transition:transform .28s cubic-bezier(.2,.8,.2,1); position:sticky!important; top:0!important}   /* sticky so it can hide / come back; no will-change — it would trap the fixed-position menu inside the header */
  body .ld-top .ld-brand, body .bk-top .bk-brand{flex:1; min-width:0}
  body .ld-top .ld-top-r, body .bk-top .bk-top-r{display:none!important}            /* the account lives in the bottom bar */
  body .ld-top .ld-gsearch, body .bk-top .bk-search{display:none!important}
  .hd-sbtn{display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; background:#10201A; border:1px solid rgba(255,255,255,.14); color:#fff; cursor:pointer; order:5}
  .hd-sbtn .ic{width:20px; height:20px}
  body .ld-top .ld-burger, body .bk-top .bk-burger{order:6; flex:none; display:grid!important; place-items:center; width:42px; height:42px; border-radius:12px; background:#10201A; border:1px solid rgba(255,255,255,.14); color:#fff}
  /* search open: the logo gives way and the box fills the header */
  body .ld-top.is-search .ld-brand, body .bk-top.is-search .bk-brand, body header.is-search .hd-sbtn{display:none!important}
  body .ld-top.is-search .ld-gsearch, body .bk-top.is-search .bk-search{display:flex!important; align-items:center; gap:10px; flex:1; min-width:0; order:1; margin:0!important; height:44px; padding:0 6px 0 14px;
    background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.2); border-radius:12px; animation:hdGrow .22s ease}
  body header.is-search .hd-sclose{display:grid; place-items:center; flex:none; width:32px; height:32px; border:0; border-radius:9px; background:transparent; color:#D3DED7; cursor:pointer}
  body header.is-search .hd-sclose .ic{width:18px; height:18px}
  body .bk-top.is-search .bk-search input, body .ld-top.is-search .ld-gsearch input{flex:1; min-width:0; background:none; border:0; outline:0; color:#fff; font-size:16px}
  @keyframes hdGrow{from{opacity:.4; transform:scaleX(.6); transform-origin:right} to{opacity:1; transform:none}}
  /* hide while scrolling down */
  body .ld-top.hd-hide, body .bk-top.hd-hide{transform:translateY(-110%)}
  /* menus: slide in from the right, over a dimmed backdrop */
  body .ld-top .ld-nav{display:flex!important; flex-direction:column; position:fixed!important; top:0!important; right:0; bottom:0; left:auto!important; width:min(84vw,320px);
    background:#10201A; padding:74px 18px 24px!important; gap:4px; z-index:62; transform:translateX(100%); visibility:hidden; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s;
    box-shadow:-18px 0 50px rgba(0,0,0,.45); border-left:1px solid rgba(255,255,255,.08); overflow-y:auto}
  body.ld-nav-open .ld-top .ld-nav{transform:none; visibility:visible; transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  body .ld-top .ld-nav a{padding:12px 6px; font-size:17px; font-weight:600; color:#E2EAE5; border-bottom:1px solid rgba(255,255,255,.06)}
  body .bk-side{left:auto!important; right:0; top:0!important; bottom:0; height:auto; transform:translateX(100%)!important; box-shadow:-18px 0 50px rgba(0,0,0,.45)!important; z-index:62!important; padding-top:14px}
  body.side-open .bk-side{transform:none!important}
  body.ld-nav-open::after, body.side-open::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:61; animation:hdFade .2s ease}
  body.ld-nav-open, body.side-open{overflow:hidden}
  body.ld-nav-open .ld-top, body.side-open .bk-top{transform:none}
  body.ld-nav-open .ld-top{z-index:63!important}   /* the homepage menu lives inside the header — lift it above the backdrop */
  @keyframes hdFade{from{opacity:0} to{opacity:1}}
}
@media (max-width:900px){
  /* V21.9: "overflow-x:hidden" on html/body silently breaks position:sticky — "clip" stops sideways scrolling the same way without breaking it */
  @supports (overflow:clip){ html, body{overflow-x:clip!important} }
  /* the homepage header's blur makes it the frame for fixed children — switch it off while its menu is open */
  body.ld-nav-open .ld-top{-webkit-backdrop-filter:none!important; backdrop-filter:none!important}
}
@media (max-width:900px){ body .ld-top .ld-nav{justify-content:flex-start!important; gap:0!important; padding:18px 18px 24px!important} }   /* V21.9: links from the top (the desktop rule centres them) */
/* ═══ V21.10 — richer phone menu: account (Log in | Register or you), icons, more links, call to action ═══ */
.mm, .mm-acct{display:none}
@media (max-width:900px){
  body .ld-top .ld-nav{display:none!important}
  .mm{display:flex; flex-direction:column; position:fixed; top:0; right:0; bottom:0; width:min(86vw,340px); z-index:64; background:#10201A; color:#E2EAE5;
      border-left:1px solid rgba(255,255,255,.08); box-shadow:-18px 0 50px rgba(0,0,0,.5); overflow-y:auto; overscroll-behavior:contain;
      padding:0 0 calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(100%); visibility:hidden; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s}
  body.ld-nav-open .mm{transform:none; visibility:visible; transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .mm-h{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; position:sticky; top:0; background:#10201A; z-index:2}
  .mm-h .pw-n{font-size:22px}
  .mm-x{width:38px; height:38px; border-radius:11px; border:1px solid rgba(255,255,255,.14); background:#10201A; color:#fff; display:grid; place-items:center; cursor:pointer}
  .mm-x .ic{width:18px; height:18px}
  .mm-acct{display:block; margin:4px 14px 10px; padding:12px; border-radius:16px; background:#10201A; border:1px solid rgba(255,255,255,.08)}
  .mm-tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; background:#10201A; border-radius:12px; padding:4px}
  .mm-tabs a{height:42px; border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:15px; color:#D3DED7; text-decoration:none}
  .mm-tabs a.is-on{background:#16833F; color:#fff}
  .mm-claim{display:flex; align-items:center; gap:10px; margin-top:10px; padding:4px 2px 2px; color:#E2EAE5; text-decoration:none}
  .mm-claim .ic{width:22px; height:22px; color:#16833F; flex:none} .mm-claim b{display:block; font-size:14px} .mm-claim small{display:block; font-size:12.5px; color:#8A968F}
  .mm-me{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none}
  .mm-av{width:44px; height:44px; border-radius:50%; background:#10201A; color:#fff; font-weight:800; display:grid; place-items:center; overflow:hidden; flex:none} .mm-av img{width:100%; height:100%; object-fit:cover}
  .mm-me b{display:block; font-size:15.5px} .mm-me small{display:block; font-size:12.5px; color:#8A968F}
  .mm-quick{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px}
  .mm-quick a{display:flex; align-items:center; gap:7px; padding:9px 10px; border-radius:10px; background:#10201A; color:#E2EAE5; font-size:13.5px; font-weight:600; text-decoration:none}
  .mm-quick .ic{width:17px; height:17px; color:#16833F}
  .mm-nav{display:flex; flex-direction:column; padding:4px 10px}
  .mm-nav a{display:flex; align-items:center; gap:14px; padding:11px 10px; border-radius:12px; color:#E2EAE5; font-size:16px; font-weight:600; text-decoration:none}
  .mm-nav a .ic{width:21px; height:21px; color:#8A968F; flex:none}
  .mm-nav a.is-on{background:rgba(22,131,63,.14); color:#fff} .mm-nav a.is-on .ic{color:#16833F}
  .mm-nav a:active{background:rgba(255,255,255,.06)}
  .mm-nav--sm a{font-size:15px; padding:9px 10px}
  .mm-sec{margin:8px 20px 2px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#5A6962}
  .mm-cta{display:flex; align-items:center; gap:12px; margin:12px 14px 6px; padding:14px; border-radius:16px; text-decoration:none; color:#fff;
      background:linear-gradient(135deg,#16833F,#12703A); box-shadow:0 12px 28px rgba(22,131,63,.28)}
  .mm-cta-ic{width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:none} .mm-cta-ic .ic{width:22px; height:22px}
  .mm-cta b{display:block; font-size:15px} .mm-cta small{display:block; font-size:12.5px; opacity:.9}
  .mm-foot{margin:auto 20px 0; padding-top:14px; font-size:13px; color:#5A6962} .mm-foot a{color:#8A968F; text-decoration:none}
  .mm-out{display:inline-flex; align-items:center; gap:5px} .mm-out .ic{width:15px; height:15px}
  /* inner pages' side menu: the same account block on phones */
  .bk-side .mm-acct{display:block; margin:6px 12px 12px}
}
@media (max-width:900px){   /* V21.10: menus above the bottom bar and the chat bubble */
  .mm{z-index:1001!important}
  body .bk-side{z-index:1001!important}
  body.ld-nav-open::after, body.side-open::after{z-index:1000!important}
  body.ld-nav-open .lv, body.side-open .lv{display:none!important}
}
/* ═══ V21.11 — phone sign-in sheet (Log in | Register) ═══ */
.as{position:fixed; inset:0; z-index:2000; font-family:Inter,system-ui,sans-serif} .as[hidden]{display:none}
html.as-lock, html.as-lock body{overflow:hidden}
.as-back{position:absolute; inset:0; background:rgba(8,8,12,.6); opacity:0; transition:opacity .25s ease}
.as.is-open .as-back{opacity:1}
.as-box{position:absolute; left:0; right:0; bottom:0; max-height:92vh; overflow-y:auto; overscroll-behavior:contain; background:#fff; color:#10201A;
  border-radius:24px 24px 0 0; padding:10px 20px calc(22px + env(safe-area-inset-bottom,0px)); box-shadow:0 -20px 60px rgba(0,0,0,.35);
  transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.as.is-open .as-box{transform:none}
@media (min-width:901px){ .as-box{left:50%; right:auto; width:440px; bottom:auto; top:50%; border-radius:22px; transform:translate(-50%,-40%); opacity:0; transition:transform .25s, opacity .25s} .as.is-open .as-box{transform:translate(-50%,-50%); opacity:1} .as-grab{display:none} }
.as-grab{width:42px; height:5px; border-radius:99px; background:#D3DED7; margin:0 auto 12px}
.as-x{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:0; background:#EEF3F0; color:#3A4A42; display:grid; place-items:center; cursor:pointer}
.as-x svg{width:18px; height:18px}
.as h2{margin:6px 0 4px; font-size:23px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:baseline}
.as h2 .pw-d{width:.26em; height:.26em; border-radius:50%; background:#16833F; display:inline-block; margin-left:.08em}
.as-sub{margin:0 0 16px; color:#5A6962; font-size:14.5px; line-height:1.4}
.as-seg{position:relative; display:grid; grid-template-columns:1fr 1fr; background:#EEF3F0; border-radius:14px; padding:4px; margin-bottom:18px}
.as-seg button{position:relative; z-index:1; height:44px; border:0; background:none; font:800 15px Inter,system-ui,sans-serif; color:#5A6962; cursor:pointer; transition:color .2s}
.as-seg button[aria-selected=true]{color:#10201A}
.as-ind{position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); background:#fff; border-radius:11px; box-shadow:0 2px 8px rgba(17,19,24,.1); transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.as[data-tab=register] .as-ind{transform:translateX(100%)}
.as-f{margin-bottom:14px}
.as-f label{display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:6px}
.as-in{position:relative; display:flex; align-items:center; border:1.5px solid #E2EAE5; border-radius:14px; background:#fff; transition:border-color .15s, box-shadow .15s}
.as-in:focus-within{border-color:#10201A; box-shadow:0 0 0 4px rgba(17,19,24,.06)}
.as-in input{flex:1; min-width:0; height:52px; border:0; outline:0; background:none; padding:0 44px 0 14px; font:500 16px Inter,system-ui,sans-serif; color:#10201A; border-radius:14px}
.as-in input::placeholder{color:#8A968F}
.as-cc{padding-left:14px; font-weight:700; color:#374151; font-size:16px; border-right:1.5px solid #E2EAE5; padding-right:10px; height:24px; display:flex; align-items:center}
.as-in--tel input{padding-left:10px}
.as-ok{position:absolute; right:14px; width:20px; height:20px; border-radius:50%; background:#16A34A; opacity:0; transform:scale(.6); transition:opacity .18s, transform .18s}
.as-ok::after{content:""; position:absolute; left:6.5px; top:3.5px; width:5px; height:10px; border:solid #fff; border-width:0 2.2px 2.2px 0; transform:rotate(45deg)}
.as-f.is-ok .as-in{border-color:#16A34A} .as-f.is-ok .as-ok{opacity:1; transform:none}
.as-f.is-bad .as-in{border-color:#16833F; box-shadow:0 0 0 4px rgba(22,131,63,.08)} .as-f.is-warn .as-in{border-color:#D97706}
.as-msg{display:block; min-height:0; margin-top:6px; font-size:12.8px; line-height:1.35; color:#5A6962} .as-msg:empty{display:none}
.as-f.is-bad .as-msg{color:#12703A} .as-f.is-warn .as-msg{color:#B45309} .as-f.is-ok .as-msg{color:#127A45}
.as-msg a{color:inherit; font-weight:800}
.as-eye{position:absolute; right:8px; width:38px; height:38px; border:0; background:none; color:#8A968F; display:grid; place-items:center; cursor:pointer; border-radius:10px}
.as-eye svg{width:21px; height:21px} .as-eye.is-on{color:#10201A}
.as-meter{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:8px} .as-meter i{height:4px; border-radius:4px; background:#E2EAE5; transition:background .2s}
.as-f[data-lvl="1"] .as-meter i:nth-child(-n+1){background:#16833F} .as-f[data-lvl="2"] .as-meter i:nth-child(-n+2){background:#D97706}
.as-f[data-lvl="3"] .as-meter i:nth-child(-n+3){background:#65A30D} .as-f[data-lvl="4"] .as-meter i{background:#16A34A}
.as-row{display:flex; justify-content:space-between; align-items:center; margin:2px 0 16px; font-size:14px} .as-row a{color:#16833F; font-weight:700; text-decoration:none}
.as-chk{display:flex; align-items:center; gap:8px; color:#374151} .as-chk input{width:18px; height:18px; accent-color:#16833F}
.as-err{background:#F2FAF4; color:#B42318; border-radius:12px; padding:10px 12px; font-size:13.5px; margin-bottom:12px}
.as-go{position:relative; width:100%; height:54px; border:0; border-radius:14px; background:#10201A; color:#fff; font:800 16px Inter,system-ui,sans-serif; cursor:pointer; opacity:.55; transition:opacity .2s, background .2s, transform .1s}
.as-go.is-ready{opacity:1; background:#16833F; box-shadow:0 10px 24px rgba(22,131,63,.28)} .as-go:active{transform:scale(.99)}
.as-go.is-busy span{visibility:hidden} .as-go.is-busy::after{content:""; position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:asSpin .7s linear infinite}
.as-go.is-done{background:#16A34A; opacity:1}
@keyframes asSpin{to{transform:rotate(360deg)}}
.as-fine{margin:12px 0 0; text-align:center; font-size:12.5px; color:#8A968F} .as-fine a{color:#5A6962; font-weight:700}
.as-broker{display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border:1.5px dashed #E2EAE5; border-radius:14px; color:#374151; font-size:13.5px; text-decoration:none}
.as-broker svg{width:22px; height:22px; color:#16833F; flex:none} .as-broker b{color:#10201A}
@media (prefers-reduced-motion:reduce){ .as-box, .as-back, .as-ind{transition:none} }
/* the menu's guest block is just the broker claim now */
.mm-acct .mm-claim:first-child{margin-top:0}
/* ═══ V21.12 — small phones (360–440 px): nothing wider than the screen ═══ */
@media (max-width:760px){
  .ft2-in{grid-template-columns:minmax(0,1fr)!important}              /* "1fr" grew to the widest unbreakable line */
  .ft2-trust{flex-wrap:wrap}
  .ft2-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:900px){
  .au2{grid-template-columns:minmax(0,1fr)!important}
  .au2-pitch, .au2-card{min-width:0} .au2-pitch *{overflow-wrap:anywhere}
}
@media (max-width:480px){
  /* homepage Brokers | Agencies tabs share the width instead of running off the card */
  .ld-tabs{gap:4px; padding:8px 8px 0}
  .ld-tabs button{flex:1 1 0; min-width:0; justify-content:center; gap:7px; padding:0 8px; height:44px; font-size:14.5px}
  .ld-tabs .ic{width:19px; height:19px; flex:none}
  .ld-tab-n{font-size:11px; padding:2px 6px}
  .ag-quick{flex-wrap:wrap}
}
@media (max-width:370px){ .ld-tabs .ic{display:none} }   /* tiny phones: text + count only */
@media (max-width:600px){   /* V21.12: on phones a phrase can be 1 or 2 lines — cross-fade in place instead of sliding through the empty line */
  .hm-rot > span, .hm-rot > span.is-in, .hm-rot > span.is-out, .hm-rot > span:not(.is-on):not(.is-out){transform:none!important}
  .hm-rot > span{opacity:0; transition:opacity .45s ease!important}
  .hm-rot > span.is-out{opacity:0; transition:opacity .3s ease!important}
  .hm-rot > span.is-on{opacity:1; transition:opacity .45s ease .2s!important}
}
@media (max-width:900px){   /* V21.13: the closed right-side menu cast its shadow onto the page — no shadow and hidden until open */
  body .bk-side{box-shadow:none!important; visibility:hidden; transition:transform .25s, visibility 0s .25s}
  body.side-open .bk-side{box-shadow:-18px 0 50px rgba(0,0,0,.45)!important; visibility:visible; transition:transform .25s}
}
/* V22.36 — Register: "Which describes you?" + broker claim + agency, inside the sheet */
.as-q{margin:4px 0 12px;font-size:16px;font-weight:800;color:#10201A} .as-q small{display:block;margin-top:3px;font-size:13px;font-weight:500;color:#5A6962;line-height:1.45}
.as-role{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 10px;padding:12px;border:1.5px solid #E2EAE5;border-radius:14px;background:#fff;text-align:left;cursor:pointer;font:inherit;color:#10201A;transition:border-color .15s,background .15s}
.as-role:hover,.as-role:focus-visible{border-color:#16833F;background:#F6FBF8;outline:0} .as-role > span:nth-child(2){flex:1;min-width:0}
.as-role b{display:block;font-size:15px} .as-role small{display:block;margin-top:2px;font-size:12.5px;color:#5A6962;line-height:1.35}
.as-role > svg{width:18px;height:18px;color:#8A968F;flex:none}
.as-ri{width:42px;height:42px;border-radius:12px;background:#E3F4E8;color:#16833F;display:grid;place-items:center;flex:none} .as-ri svg{width:21px;height:21px}
.as-return{display:inline-flex;align-items:center;gap:4px;margin:0 0 6px -4px;padding:4px;border:0;background:none;font:700 13.5px Inter,system-ui,sans-serif;color:#5A6962;cursor:pointer} .as-return svg{width:17px;height:17px} .as-return:hover{color:#10201A}
.as-found{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#F0FAF4;border:1px solid #B7E4C7} .as-found b{display:block;font-size:14px} .as-found small{display:block;font-size:12px;color:#5A6962}
.as-fav{width:38px;height:38px;border-radius:50%;background:#E8EEF7;color:#25406B;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.as-link{margin-top:6px;padding:0;border:0;background:none;font:700 13px Inter,system-ui,sans-serif;color:#16833F;cursor:pointer} .as-link:disabled{color:#8A968F;cursor:default}
[data-as-form="broker"] .as-go,[data-as-form="agency"] .as-go{opacity:1;margin-bottom:10px}
.as-go--a{display:flex;align-items:center;justify-content:center;text-decoration:none} .as-go--ghost{background:#fff;color:#10201A;border:1.5px solid #E2EAE5}
[data-as-form="broker"] .as-go:not(.as-go--ghost),[data-as-form="agency"] .as-go:not(.as-go--ghost){background:#16833F;box-shadow:0 10px 24px rgba(22,131,63,.22)}
/* V22.39 — sheet sign-up: international phone picker + email code */
#authSheet .as-in--intl{padding:0;border:0;background:none;box-shadow:none} #authSheet .as-in--intl .ip{width:100%} #authSheet .ip-msg{display:none!important}
#authSheet .ip{display:flex;align-items:stretch;height:52px;border:1.5px solid #E2EAE5;border-radius:14px;background:#fff;position:relative} #authSheet .ip:focus-within{border-color:#10201A}
#authSheet .ip input[type=tel]{flex:1;min-width:0;border:0;outline:0;background:none;font:500 16px Inter,system-ui,sans-serif;color:#10201A;padding:0 12px}
#authSheet .ip-menu{z-index:30}
.as-otp{margin:-4px 0 14px} .as-otp-send{width:100%;height:44px;border:1.5px solid #16833F;border-radius:12px;background:#F6FBF8;color:#16833F;font:800 14.5px Inter,system-ui,sans-serif;cursor:pointer} .as-otp-send:disabled{opacity:.6}
.as-otp-row{display:flex;gap:8px} .as-otp-row input{flex:1;min-width:0;height:48px;border:1.5px solid #E2EAE5;border-radius:12px;padding:0 14px;font:700 18px Inter,system-ui,sans-serif;letter-spacing:.3em;color:#10201A} .as-otp-row input:focus{outline:0;border-color:#10201A}
.as-otp-ok{height:48px;padding:0 16px;border:0;border-radius:12px;background:#10201A;color:#fff;font:800 14px Inter,system-ui,sans-serif;cursor:pointer}
.as-otp-msg{display:block;margin-top:6px;font-size:12.5px;color:#5A6962} .as-otp-msg.is-bad{color:#B42318}
.as-otp-done{display:flex;align-items:center;gap:6px;margin:-4px 0 14px;padding:10px 12px;border-radius:12px;background:#E7F7EE;color:#127A45;font-size:14px;font-weight:800} .as-otp-done svg{width:18px;height:18px}
/* V22.40 — sheet: reset password, new-country code, success */
.as-note{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#F4F7F5;font-size:13.5px;color:#374151}
.as-note-ok{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#E7F7EE;color:#127A45;font-size:13.5px;font-weight:700}
[data-as-form="forgot"] .as-go,[data-as-form="code"] .as-go{opacity:1;background:#16833F;margin-bottom:10px}
.as-done{text-align:center;padding:26px 8px 18px} .as-done-ic{width:64px;height:64px;border-radius:50%;background:#E7F7EE;color:#16A34A;display:grid;place-items:center;margin:0 auto 12px;animation:asPop .35s ease-out}
.as-done-ic svg{width:34px;height:34px} .as-done-t{margin:0 0 4px;font-size:20px;font-weight:800;color:#10201A} .as-done-s{margin:0;font-size:14px;color:#5A6962}
@keyframes asPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
#authSheet[data-view="done"] .as-seg,#authSheet[data-view="done"] #asSub{display:none}
/* V22.41 — desktop: the sign-in form is a centred window; long steps scroll inside it */
@media (min-width:901px){ .as-box{max-height:92vh;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 30px 80px rgba(17,19,24,.28)} }
/* V22.42 — Remember this device */
.as-remember{margin:-6px 0 12px;font-size:12px;color:#8A968F}
#authSheet[data-view="login"] .as-remember{display:block}
/* V22.47 — join page: four account types */
.jn-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
@media (max-width:1100px){ .jn-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important} }
@media (max-width:640px){ .jn-cards{grid-template-columns:1fr!important} }
a.as-role{text-decoration:none}

/* 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.150 — the whole conversation panel in the chat look (as in the ZeroSpams theme): dotted green behind the
   empty state and the messages; the message list is transparent so the dots run through; header and composer stay white */
.msg-chat{background-color:#EAF2EC !important;background-image:radial-gradient(#D3E3D7 1.1px,transparent 1.3px) !important;background-size:20px 20px !important}
.msg-chat .msg-log{background:transparent !important}
.msg-empty-ic{background:transparent !important;color:#A3BFAE !important;width:56px;height:56px}
.msg-empty-ic svg{width:44px;height:44px;stroke-width:1.6}
.msg-empty h2{color:#3A4A42;font-weight:600;font-size:17px}
.msg-empty p{color:#5A6962}

/* 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}