/* Balkoun theme "hu" (2026-10-28): the HomeUAE-measured structure on top of the live app.
Loaded after the inline stylesheet, so equal-specificity rules here win. Sizes come from
design-directions/homeuae-ref/measure-*.json and the hu/ preview; menu type sizes are the live drawer's. */
:root{--navy:#11213F;--navy-2:#172B4F;--navy-w:#1B2F55;--gold:#CA9051;--gold-w:rgba(202,144,81,.16);--gold-dk:#E3B563;
--page:#11213F;--ink:#FFFFFF;--line:rgba(255,255,255,.12);--grey:#9AA3B2;--card:#172B4F;--muted:#9AA3B2;--wa:#25D366;
--f:'Lato','Zain',system-ui,sans-serif;--fd:'Lato','Zain',system-ui,sans-serif;--r:8px;--r-s:5px;--r-l:12px}
html{scroll-behavior:smooth}
body{background:var(--navy);color:#fff;font-family:var(--f);font-size:14px;line-height:1.6;-webkit-font-smoothing:auto}
a{color:inherit}
.wrap{max-width:1440px;padding:0 60px}
/* ===== header: logo, gold "post", bell (member), burger. Absolute over the hero on the home page ===== */
header{background:transparent;color:#fff;padding:calc(25px + max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px))) 0 0} /* + the phone's status bar: the Android/iPhone app and the home-screen web app draw under it (owner 2026-11-03) */
body:not(.home-hero) header{background:var(--navy);position:relative}
body.home-hero header{position:absolute;top:0;left:0;right:0;z-index:40}
.hbar{height:auto;min-height:40px;gap:16px;padding:0 0 25px}
.hbar .logo{margin-inline-end:auto;transition:transform .3s}
.hbar .logo:hover{transform:scale(1.05)}
.hbar .logo .bmark{width:40px;height:40px}
.hnav,.hpill,.hbar .navmore,.hbar #langWrap,.hbar .cpickw,.hbar #cur,.hbar #bIn,.hbar #menu{display:none!important}
.htools{display:flex;align-items:center;gap:10px}
.cta-add{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:20px;background:var(--gold);color:var(--navy);font-weight:700;font-size:14px;text-decoration:none;transition:transform .3s,box-shadow .3s}
.cta-add:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(202,144,81,.3)}
.cta-add svg{width:16px;height:16px}
html body .hbar #hmb{display:grid!important;width:44px;height:44px;border:0;background:none;border-radius:0;margin-inline-start:4px;place-items:center}
.hmb .bars{position:relative;width:26px;height:18px;display:block}
.hmb .bars b{position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s,top .3s}
.hmb .bars b:nth-child(1){top:0}.hmb .bars b:nth-child(2){top:8px}.hmb .bars b:nth-child(3){top:16px}
body.mdw-open .hmb .bars b:nth-child(1){top:8px;transform:rotate(45deg)}
body.mdw-open .hmb .bars b:nth-child(2){opacity:0}
body.mdw-open .hmb .bars b:nth-child(3){top:8px;transform:rotate(-45deg)}
.hmb-dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:#E24B4B;border:2px solid var(--navy)}
.bell{background:none;border:0;color:#fff;font-size:20px;cursor:pointer;position:relative}
.wa-fab{position:fixed;left:18px;bottom:calc(28px + max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px)));z-index:30;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .3s;text-decoration:none}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.mdw-open .wa-fab{display:none}
/* ===== the menu: a full-screen navy sheet (same #mdw / .on / body.mdw-open hooks as the live drawer) ===== */
.mdw{display:block;visibility:hidden;pointer-events:none}
.mdw.on{visibility:visible;pointer-events:auto}
.mdw-bg{display:none}
.mdw-p.mdw2{inset:0;width:auto;background:var(--navy);box-shadow:none;animation:none;transform:translateX(100%);transition:transform .3s;padding:0;overflow:auto;color:#fff}
.mdw.on .mdw-p.mdw2{transform:none}
.mm-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mm-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,33,63,.55),rgba(17,33,63,.9) 55%,rgba(17,33,63,.97))}
.mm-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.mdw2 .mdw-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:25px 60px 0;background:none}
.mdw2 .mdw-top .logo{color:#fff}
.mdw-x{width:44px;height:44px;border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.mdw-x svg{width:28px;height:28px}
.mm-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:40px 60px 50px;max-width:1440px;margin:0 auto}
.mm-main,.mm-side{display:grid;gap:16px;align-content:start}
.mm-box{opacity:0;transform:translateY(20px);transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:calc(.12s + var(--i,0)*.06s)}
.mdw.on .mm-box{opacity:1;transform:none}
.mm-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mm-tiles a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);font-size:11.5px;font-weight:600;text-decoration:none;color:#fff;cursor:pointer;transition:.3s;text-align:center;line-height:1.3}
.mm-tiles a .mi,.mm-tiles a svg{width:20px;height:20px;color:var(--gold)}
.mm-tiles a:hover{border-color:var(--gold);background:var(--gold-w);transform:translateY(-3px)}
.mm-tiles a.t-post{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.mm-tiles a.t-post svg{color:var(--navy)}
.mm-tag{font-style:normal;font-size:10px;font-weight:800;padding:1px 7px;border-radius:10px;background:#2EA36B;color:#fff;margin-inline-start:8px;vertical-align:middle}
.mm-tag.soon{background:rgba(255,255,255,.12);color:#cfd6e2}
.mm-tiles .mm-tag{position:absolute;top:-8px;inset-inline-start:10px;margin:0}
.mm-group h4,.mm-box h4{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--gold-dk);text-transform:uppercase}
.mm-link{display:flex;align-items:center;gap:10px;min-height:44px;padding:11px 0;font-size:14.5px;color:#fff;text-decoration:none;cursor:pointer;border-bottom:1px solid var(--line);transition:color .3s,padding .3s}
.mm-link:hover{color:var(--gold);padding-inline-start:6px}
.mm-link.soon{color:var(--muted)}
.mm-link .mi{width:18px;height:18px;color:var(--gold);flex:none;display:inline-flex}
.mm-link .mi svg{width:18px;height:18px}
.mm-acct{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.mm-acct .g,.mm-acct .m{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center}
.mm-acct .av,.mm-acct img.av{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:700;font-size:18px;object-fit:cover}
.mm-acct .av svg{width:24px;height:24px}
.mm-acct b{display:block;font-size:15px}
.mm-acct small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:2px}
.mm-acct .mdw-in{grid-column:1/-1;height:40px;border-radius:10px;font-size:14px;font-weight:700;background:var(--gold);color:var(--navy);border:0;cursor:pointer;transition:transform .3s,box-shadow .3s}
.mm-acct .mdw-in:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(202,144,81,.3)}
.mm-acctlink{color:var(--gold-dk);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;text-decoration:none}
.mm-shortcuts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.mm-shortcuts a{display:flex;align-items:center;gap:8px;font-size:14.5px;min-height:38px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);text-decoration:none;color:#fff;cursor:pointer;transition:.3s;white-space:nowrap}
.mm-shortcuts a:hover{background:var(--gold-w);color:var(--gold)}
.mm-shortcuts .mi{width:16px;height:16px;color:var(--gold);display:inline-flex}
.mm-shortcuts .mi svg{width:16px;height:16px}
.mm-shortcuts em{font-style:normal;margin-inline-start:auto;font-size:12px;color:var(--muted);font-family:"Lato",sans-serif}
.mm-shortcuts em.badge{background:#E24B4B;color:#fff;border-radius:10px;padding:0 6px;font-weight:700;line-height:18px}
.mm-govs{display:flex;flex-wrap:wrap;gap:8px}
.mm-govs a{border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:13px;color:#dfe4ec;text-decoration:none;cursor:pointer;transition:.3s}
.mm-govs a:hover{border-color:var(--gold);color:var(--gold)}
.mm-app{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px dashed rgba(202,144,81,.5);border-radius:12px;color:#fff;text-decoration:none;cursor:pointer;transition:.3s}
.mm-app:hover{background:var(--gold-w)}
.mm-app .mi{width:22px;height:22px;color:var(--gold);display:inline-flex}
.mm-app .mi svg{width:22px;height:22px}
.mm-app span{flex:1}.mm-app b{display:block;font-size:14.5px}.mm-app small{color:var(--muted);font-size:12.5px}
.mm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.mm-seg{display:inline-flex;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.mm-seg a{padding:9px 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:#fff;cursor:pointer;text-decoration:none;transition:.3s;border-inline-end:1px solid var(--line)}
.mm-seg a:last-child{border:0}
.mm-seg a.on{background:var(--gold-w);color:var(--gold)}
.mm-seg .langflag{display:inline-flex;width:18px}
.mm-seg .flg{width:18px;height:12px;border-radius:2px;overflow:hidden;display:inline-block}
.mm-wa{display:inline-flex;align-items:center;gap:10px;background:var(--wa);color:#fff;border-radius:8px;padding:11px 20px;font-weight:700;font-size:14px;text-decoration:none;margin-inline-start:auto;transition:transform .3s}
.mm-wa:hover{transform:translateY(-2px)}
.mm-wa svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mm-note{font-size:12.5px;color:var(--muted);width:100%}
.mm-out{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--muted);cursor:pointer;text-decoration:none}
.mm-out:hover{color:#fff}
.mm-out .mi{display:inline-flex;width:16px;height:16px}.mm-out .mi svg{width:16px;height:16px}
.mdw2 .mdw2-sec,.mdw2 .mdw2-h,.mdw2 .mdw2-tiles{all:unset}
/* ===== hero: 100vh, three cross-fading photos, the outlined kufi h1, the 6-field strip ===== */
.hero-outer.hu{min-height:100vh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;margin:0}
.hero-outer.hu .hv{opacity:1}
.hslides{position:absolute;inset:0}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 2s ease-in-out}
.hslide.on{opacity:1}
.hslide picture{position:absolute;inset:0}
.hslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-outer.hu .hscrim{background:linear-gradient(180deg,rgba(17,33,63,.35),rgba(17,33,63,.15) 50%,rgba(17,33,63,.55))}
.hdots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hdots i{width:40px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);cursor:pointer;transition:.3s}
.hdots i:hover:not(.on){background:rgba(255,255,255,.5)}
.hdots i.on{background:var(--gold)}
.hero-outer.hu .hero{min-height:0;padding:0 0 120px;text-align:center;width:100%;display:block}
.hero-outer.hu .hero .wrap{width:840px;max-width:100%;padding:0;margin:0 auto}
.hero-outer.hu .hero h1{font-family:"Reem Kufi",var(--f);font-weight:700;font-size:68px;line-height:1.25;margin:0 auto 10px;padding:0 .1em;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.92);text-shadow:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7)) drop-shadow(0 8px 22px rgba(0,0,0,.45))}
.hero-outer.hu .hero h1 span{color:var(--gold);-webkit-text-stroke:0;font-weight:700}
.hero-outer.hu .sbar,.home-hero .hero-outer.hu .sbar{display:block;background:none;box-shadow:none;border-radius:0;max-width:none}
.hero-outer.hu .sbar-glass{display:none}
.hero-outer.hu .stabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 12px;background:none;border:0;border-radius:0;overflow:visible}
.hero-outer.hu .stabs button{background:#fff;color:#6B7484;border:0;border-radius:8px;height:32px;line-height:32px;padding:0;font-size:12px;font-weight:400;cursor:pointer;transition:.3s}
.hero-outer.hu .stabs button:hover{color:var(--navy)}
.hero-outer.hu .stabs button.on{background:var(--gold);color:var(--navy)}
.hero-outer.hu .stabs .stabs-map svg{display:none}
.hero-outer.hu .srow{display:grid;grid-template-columns:repeat(6,1fr) 120px;background:#fff;border-radius:8px;overflow:hidden;height:61px;text-align:start}
.hero-outer.hu .sf{height:61px;background:#fff;padding:8px 12px;border-inline-end:1px solid #e6e8ec;color:var(--navy);min-width:0;display:flex;flex-direction:column;justify-content:center;cursor:pointer;transition:background .3s;font-size:12px;line-height:14px;font-weight:600}
.hero-outer.hu .sf:hover{background:#f7f7f9}
.hero-outer.hu .sf .cs-compact .chipsel-box,.hero-outer.hu .sf .chipsel-box,.hero-outer.hu .sf .cs-sum,.hero-outer.hu .sf .chipsel-trig,.hero-outer.hu .sf .pricetrig,.hero-outer.hu .sf select{background:none;border:0;padding:0;font:inherit;color:var(--navy);width:100%;text-align:start;display:flex;justify-content:space-between;align-items:center;white-space:nowrap;overflow:hidden}
.hero-outer.hu .sf .chipsel-trig .chev,.hero-outer.hu .sf .pricetrig .chev{width:14px;height:14px;color:#6B7484;flex:none}
.hero-outer.hu .sf-price{border-inline-end:0}
.hero-outer.hu .sgo{border-radius:0;height:61px;width:100%;padding:0;font-size:14px;font-weight:600;color:var(--navy);transition:transform .3s,filter .3s}
.hero-outer.hu .sgo:hover{transform:translateY(-2px);filter:brightness(1.05)}
.hero-outer.hu .sgo #hgoCount{display:none}
.hero-outer.hu .sgo-map{display:none}
.hero-outer.hu .hnote{font-size:13px;margin-top:14px;opacity:.9}
.hero-outer.hu .aisearch{margin-top:18px}
.hero-outer.hu .hero-credit{position:absolute;bottom:8px;right:12px;font-size:11px;color:rgba(255,255,255,.6);z-index:3}
/* ===== sections on the dark page ===== */
.sec{padding:60px 0 40px}
.sec h2,.sec h2{font-size:40px;font-weight:400;line-height:1.3;margin:0 0 12px;letter-spacing:.01em}
.sec .sub{color:var(--muted);font-size:16px;margin-bottom:34px}
.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
/* ===== the card (live markup .card.c2 restyled to 423x460: image 253, body 8/14, title 18, rows 13, gold price 16) ===== */
.card.c2{background:var(--navy-2);border:0;border-radius:8px;box-shadow:none;overflow:hidden;color:#fff;transition:transform .3s,box-shadow .3s}
.card.c2:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,.3);border-color:transparent}
.card.c2 .ph{height:253px;aspect-ratio:auto;border-radius:8px;overflow:hidden;background:var(--navy)}
.card.c2 .ph img,.card.c2 .ph video{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card.c2:hover .ph img{transform:scale(1.1)}
.card.c2 .bd{top:30px;inset-inline-start:30px;gap:6px}
.card.c2 .cbg{background:rgba(202,144,81,.9);color:var(--navy);border:1px solid var(--gold);border-radius:16px;padding:6px 12px;font-size:12px;line-height:19px;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.card.c2 .cbg.ok{background:#2EA36B;color:#fff;border-color:#2EA36B}
.card.c2 .cbg.vid,.card.c2 .cbg.share{background:rgba(17,33,63,.85);color:#fff;border-color:rgba(255,255,255,.3)}
.card.c2 .cfav{background:rgba(17,33,63,.6);color:#fff;border:1px solid rgba(255,255,255,.25)}
.card.c2 .cfav.on{color:var(--gold)}
.card.c2 .cpc{background:rgba(17,33,63,.75);color:#fff;border-radius:12px;font-size:12px}
.card.c2 .cb{padding:8px 14px 16px;display:flex;flex-direction:column;gap:7px}
.card.c2 .cprice{order:5;margin-top:4px}
.card.c2 .cprice .p{color:var(--gold);font-size:16px;line-height:19px;font-weight:600}
.card.c2 .cpm{color:#fff;font-size:13px}
.card.c2 .ctitle{font-size:18px;line-height:18px;font-weight:600;color:#fff;margin:0 0 4px}
.card.c2 .cloc{color:#fff;font-size:13px;line-height:16px;display:flex;align-items:center;gap:8px}
.card.c2 .cloc svg,.card.c2 .cfacts svg{color:#838C9C;width:16px;height:16px}
.card.c2 .cfacts{font-size:13px;line-height:16px;color:#fff;gap:20px;display:flex;flex-wrap:wrap}
.card.c2 .cfacts span{display:inline-flex;align-items:center;gap:6px}
.card.c2 .cfacts b{font-weight:400}
.card.c2 .cfoot{order:6;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-top:4px}
.card.c2 .cpill{background:rgba(255,255,255,.08);color:#dfe4ec;border:0;border-radius:12px;padding:3px 10px;font-size:12px}
.card.c2 .cpill.green,.card.c2 .cpill .tabu-green{color:#7FD9A8}
.card.c2 .cpill.agency img{width:16px;height:16px;border-radius:50%}
.card.c2 .csince,.card.c2 .cref{color:var(--muted);font-size:12px}
.card.c2 .cdesc{color:#cfd6e2;font-size:13px}
.card.c2 .stamp{background:rgba(226,75,75,.9);color:#fff}
/* ===== footer ===== */
footer{background:var(--navy);border-top:1px solid var(--line);color:#cfd6e2;padding:48px 0 28px;margin-top:0;font-size:13.5px}
footer .flinks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 32px;margin-bottom:28px}
footer .flinks a{color:#cfd6e2;text-decoration:none;transition:color .3s;display:block;line-height:1.7}
footer .flinks a:hover{color:var(--gold)}
footer .fbot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:18px;margin-top:12px;font-size:12.5px;color:var(--muted)}
/* ===== generic controls on the dark page ===== */
.gold{background:var(--gold);color:var(--navy);border-radius:8px}
.mini{border-color:rgba(255,255,255,.3);color:#fff}
.mobfab{background:var(--gold);color:var(--navy)}
input,select,textarea{color-scheme:dark}
.menu{background:var(--navy-2);color:#fff;border:1px solid var(--line)}
.menu a{color:#fff}
.menu a:hover{background:rgba(255,255,255,.08)}
/* ===== responsive tiers (homeuae-ref/measure-widths.json) ===== */
@media (min-width:861px) and (max-width:1400px){
.hero-outer.hu .hero h1{font-size:60px}
.hero-outer.hu .stabs button{font-size:10.5px}
.hero-outer.hu .srow{height:50px}
.hero-outer.hu .sf{padding:5px 8px 5px 10px;font-size:10.5px;line-height:12.25px}
.hero-outer.hu .sgo{height:50px;font-size:12.25px}
.sec h2{font-size:35px}
.card.c2 .ctitle{font-size:15.75px;line-height:15.75px}
.card.c2 .cloc,.card.c2 .cfacts{font-size:11.375px;line-height:13.65px}
.card.c2 .cprice .p{font-size:14px;line-height:16.8px}
.card.c2 .cbg{font-size:10.5px;line-height:16.8px}
}
@media (min-width:1441px){
.wrap{max-width:none}
.hero-outer.hu .hero .wrap{width:980px}
.hero-outer.hu .hero h1{font-size:78px}
.hero-outer.hu .stabs button{height:30px;line-height:30px;font-size:13.125px}
.hero-outer.hu .sf{font-size:13.125px;line-height:13.125px}
.hero-outer.hu .sgo{font-size:15px}
.res{gap:30px}
.card.c2 .ctitle{font-size:20.625px;line-height:20.625px}
.card.c2 .cloc,.card.c2 .cfacts{font-size:14.0625px;line-height:16.875px}
.card.c2 .cprice .p{font-size:15px;line-height:18px}
.sec h2{font-size:32px}
}
@media (min-width:1800px){
.wrap{padding:0 180px}
header{padding-top:calc(30px + max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px)))}
.hbar .logo .bmark{width:64px;height:64px}
.cta-add{height:46px;padding:0 22px;font-size:16px;border-radius:23px}
.hero-outer.hu .hero h1{font-size:88px}
.hero-outer.hu .stabs button{font-size:14px}
.hero-outer.hu .sf{font-size:14px;line-height:14px}
.card.c2 .ph{height:324px}
.card.c2 .cb{padding:11px 20px 20px;gap:10px}
.card.c2 .ctitle{font-size:24px;line-height:24px}
.card.c2 .cloc,.card.c2 .cfacts{font-size:16px;line-height:19.2px}
.card.c2 .cprice .p{font-size:20px;line-height:24px}
.sec h2{font-size:48px}
.sec{padding:80px 0 40px}
}
@media (max-width:860px){
.wrap{padding:0 20px}
header{padding-top:calc(20px + max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px)))}
.hbar{padding-bottom:20px}
.hbar .logo .bmark{width:39px;height:39px}
.cta-add{display:none}
.wa-fab{left:auto;right:20px;bottom:calc(20px + max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px)))}
body.home-hero header{position:absolute}
.hero-outer.hu{min-height:100vh;height:100vh;display:block}
.hero-outer.hu .hv,.hslides{height:560px;bottom:auto}
.hero-outer.hu .hscrim{height:560px;bottom:auto;background:linear-gradient(180deg,rgba(17,33,63,.2),rgba(17,33,63,.1) 60%,var(--navy))}
.hero-outer.hu .hero{position:absolute;top:400px;left:20px;right:20px;padding:0}
.hero-outer.hu .hero h1{font-size:34px;line-height:44px;margin:0 0 6px;-webkit-text-stroke-width:1.1px}
.hero-outer.hu .stabs{gap:6px;margin:0 0 8px;grid-template-columns:repeat(4,1fr)}
.hero-outer.hu .stabs button{height:30px;line-height:30px;font-size:13px}
.hero-outer.hu .srow{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:none;border-radius:0;overflow:visible;height:auto}
.hero-outer.hu .sf{background:#fff;border-radius:5px;border:0;padding:8px 12px;height:48px;font-size:14px;line-height:14px}
.hero-outer.hu .sf:nth-child(1),.hero-outer.hu .sf:nth-child(2),.hero-outer.hu .sf:nth-child(5){grid-column:span 2}
.hero-outer.hu .sgo{grid-column:span 2;height:48px;border-radius:5px;font-size:14px}
.hero-outer.hu .hnote{display:none}
.hdots{bottom:12px}
.mdw2 .mdw-top{padding:20px 20px 0}
.mm-in{grid-template-columns:1fr;gap:0;padding:24px 20px 110px;display:flex;flex-direction:column}
.mm-main,.mm-side{display:contents}
.mm-acct{order:-2;margin-bottom:22px}
.mm-tiles{order:-1;margin-bottom:18px}
.mm-tiles a{font-size:11.5px;padding:12px 2px 10px;white-space:nowrap}
.mm-group{order:0;margin-bottom:14px}
.mm-link{font-size:13.5px;padding:8px 0;min-height:38px}
.mm-side>.mm-box{order:3;margin-bottom:18px}
.mm-shortcuts{grid-template-columns:1fr 1fr}
.mm-shortcuts a{font-size:13.5px}
.mm-foot{order:5}
.mm-wa{margin:0;width:100%;justify-content:center}
.sec{padding:40px 0 30px}
.sec h2{font-size:28px;line-height:36.4px}
.res{grid-template-columns:1fr;gap:20px}
.card.c2 .ph{height:211px}
.card.c2 .bd{top:20px;inset-inline-start:20px}
.card.c2 .cbg{font-size:10px;line-height:16px;padding:4px 8px}
.card.c2 .cb{padding:11px 16px 20px}
.card.c2 .ctitle{font-size:20px;line-height:20px}
footer .flinks{grid-template-columns:1fr 1fr}
}
.hero-outer.hu .sf .chipsel{height:100%}
.hero-outer.hu .sf .chipsel-box{padding:0;min-height:0;height:100%;border-radius:0}
.hero-outer.hu .sf .cs-sum{font-size:12px;line-height:14px;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.hero-outer.hu .sf .cs-sum .ph{color:#6B7484;font-weight:400;font-size:10px;line-height:10px;display:block}
.hero-outer.hu .sf .cs-sum::before{content:attr(data-ph);display:block;font-size:10px;line-height:10px;color:#6B7484;font-weight:400;margin-bottom:4px}
.hero-outer.hu .sf .cs-sum .ph{display:none}
.hero-outer.hu .sf .cs-sum:empty::after,.hero-outer.hu .sf .cs-sum[data-names="[]"]::after{content:"الكل";font-size:12px;line-height:14px;font-weight:600;color:var(--navy)}
.hero-outer.hu .sf .chev{width:14px;height:14px;color:#6B7484}
@media (max-width:860px){ .hero-outer.hu .srow{grid-template-columns:1fr 1fr} .hero-outer.hu .sf{height:48px} .hero-outer.hu .hero .wrap{width:auto} }
/* ===== dark-page fixes found by the light-background probe (home / search / listing) ===== */
#app h1,#app h2,#app h3,#app h4,.sec h2,.sec .eyebrow+h2{color:#fff}
.rv.in,.frame,.coll.frame,.guide,.band.frame,.frame.smap,.gh,.rs-bar,.rs-map,.rs-mapnote,.rs-avgbox,.crumb.crumb-l,.crumb-back,.lsec.ldeed,.lbtn.line,.hcta,.trustb,.gcard,.tile{background:var(--navy-2);color:#fff;border-color:var(--line)}
.gh{border:1px solid rgba(255,255,255,.3);color:#fff}
.gh:hover{border-color:var(--gold);color:var(--gold)}
.chipsel-box,.rs-bar .chipsel-box{background:var(--navy-2);color:#fff;border-color:var(--line)}
.chipsel-drop,.pricepop,.menu,.notifmenu{background:var(--navy-2);color:#fff;border-color:var(--line);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.chipsel-drop label,.chipsel-drop a,.pricepop label{color:#fff}
.ltag{background:rgba(255,255,255,.1);color:#fff;border-color:transparent}
.ltag.green,.cpill.green{background:rgba(46,163,107,.22);color:#7FD9A8}
.vbadge,.newtag,i.newtag{background:#2EA36B;color:#fff}
.ldesc,.sub,.cdesc,p{color:#dfe4ec}
.ava{color:#fff}
#app .ltr{color:inherit}
.lprice,.lprice .ltr{color:var(--gold)}
.lfacts .lf{background:var(--navy-2);color:#fff;border-color:var(--line)}
.ldl,.ldl div,.lamen li,.lutil div{color:#fff;border-color:var(--line)}
.lsec{color:#fff}
/* the hero tabs: four white pills on the photo (force past the live .home-hero rules) */
.home-hero .hero-outer.hu .stabs{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px!important;background:none!important;border:0!important;padding:0!important;margin:20px 0 12px!important;border-radius:0!important;box-shadow:none!important}
.home-hero .hero-outer.hu .stabs button{background:#fff!important;color:#6B7484!important;border:0!important;border-radius:8px!important;height:32px!important;line-height:32px!important;padding:0!important;font-size:12px!important;font-weight:400!important;flex:none!important;width:auto!important;margin:0!important}
.home-hero .hero-outer.hu .stabs button.on{background:var(--gold)!important;color:var(--navy)!important}
.home-hero .hero-outer.hu .srow{margin:0!important;border-radius:8px!important}
/* ===== hero polish: no glass box, stacked label/value in the fields, map tab visible, ads row at the bottom ===== */
.hero-outer.hu{flex-direction:column;justify-content:flex-end;align-items:stretch}
.hero-outer.hu .hero{padding-bottom:40px}
.hero-outer.hu .adsec{position:relative;z-index:3;padding-bottom:40px}
.hero-outer.hu .sbar::before,.hero-outer.hu .sbar::after,.hero-outer.hu .sbar .sbar-glass{display:none!important}
.hero-outer.hu .sbar,.hero-outer.hu .sbar.glass,.hero-outer.hu .sbar.aiglow{background:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.home-hero .hero-outer.hu .stabs .stabs-map{display:block!important}
.home-hero .hero-outer.hu .stabs .stabs-map svg{display:none}
.hero-outer.hu .sf .cs-sum{display:flex;flex-direction:column;gap:4px}
.hero-outer.hu .sf .cs-sum::before{margin:0}
.hero-outer.hu .sf .cs-sum[data-names="[]"]::after{content:"الكل"}
.hero-outer.hu .sf .pricetrig{flex-direction:column;align-items:flex-start;gap:4px;font-size:12px;line-height:14px;font-weight:600}
.hero-outer.hu .sf .pricetrig .chev{position:absolute;inset-inline-end:12px;top:50%;margin-top:-7px}
.hero-outer.hu .sf.sf-price{position:relative}
.hero-outer.hu .sf select{font-size:12px;font-weight:600}
.rs-bar .chipsel-box,.rs-bar .cs-compact .chipsel-box,.chipsel-box{background:var(--navy-2)!important;color:#fff!important;border-color:var(--line)!important}
.rs-bar .cs-sum,.rs-bar .cs-sum .ph{color:#fff}
@media (max-width:860px){
.hero-outer.hu{display:flex;flex-direction:column;height:auto;min-height:100vh;justify-content:flex-start}
.hero-outer.hu .hero{position:relative;top:auto;left:auto;right:auto;margin-top:400px;padding:0 20px 20px;z-index:3}
.hero-outer.hu .adsec{padding-bottom:20px}
.hero-outer.hu .hero h1{font-size:40px;line-height:50px}
}
/* the hero fields stay white (the dark chip rule above is for the results bar) */
.hero-outer.hu .sf .chipsel-box,.hero-outer.hu .sf .cs-compact .chipsel-box{background:transparent!important;color:var(--navy)!important;border:0!important}
.hero-outer.hu .sf .cs-sum,.hero-outer.hu .sf .cs-sum::after{color:var(--navy)!important}
.hero-outer.hu .sf .cs-sum::before{color:#6B7484!important}
@media (max-width:860px){ .hero-outer.hu .sf{background:#fff!important} .mobfab{bottom:calc(90px + max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px)))} }
/* owner, 2026-10-28: no map tab in the hero (the map lives in the menu), no ad squares in the hero, the search strip sits at the bottom like HomeUAE */
.home-hero .hero-outer.hu .stabs{grid-template-columns:repeat(3,1fr)!important}
.home-hero .hero-outer.hu .stabs .stabs-map{display:none!important}
.hero-outer.hu .adsec,.hero-outer.hu .adslot,.hero-outer.hu .topbanner-wrap{display:none!important}
.hero-outer.hu .hero{padding-bottom:120px}
.hero-outer.hu .sgo-map,.hero-outer.hu .newtag,.hero-outer.hu .qf-badge{display:none!important}
@media (max-width:860px){ .hero-outer.hu .hero{padding-bottom:30px} }
/* the hero block sits at the bottom of the 100vh photo (the live .hero stretches to fill; undo that) */
.hero-outer.hu .hero{flex:0 0 auto!important;margin-top:auto;align-self:stretch}
body.home-hero.hero-in-view .mobfab{display:none}
.mobfab{bottom:calc(20px + max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px)))}
/* ===== QA pass 2026-10-28: dropdowns were clipped by the strip's overflow; the two bars now share one shape ===== */
.hero-outer.hu .srow{overflow:visible;border-radius:8px}
.hero-outer.hu .srow .sf:first-child{border-start-start-radius:8px;border-end-start-radius:8px}
.hero-outer.hu .srow .sgo{border-start-end-radius:8px;border-end-end-radius:8px}
.hero-outer.hu .sf{position:relative}
.hero-outer.hu .sf .chipsel,.hero-outer.hu .sf .chipsel-box{overflow:visible}
.hero-outer.hu .chipsel-drop{z-index:60;background:#fff;color:var(--navy);border-radius:8px;box-shadow:0 18px 44px -10px rgba(0,0,0,.45);text-align:start}
.hero-outer.hu .chipsel-drop label,.hero-outer.hu .chipsel-drop a,.hero-outer.hu .chipsel-drop .chipsel-opt,.hero-outer.hu .chipsel-drop .cs-h{color:var(--navy)}
.hero-outer.hu .pricepop{background:#fff;color:var(--navy);border-radius:8px;z-index:60}
.hero-outer.hu .pricepop label,.hero-outer.hu .pricepop input{color:var(--navy)}
.hero-outer.hu .aisearch{margin-top:12px}
.hero-outer.hu .aisearch-pill{border-radius:8px;height:48px;max-width:none;box-shadow:none}
.hero-outer.hu .aisearch-badge{border-radius:6px}
.hero-outer.hu .aisearch-go{border-radius:6px}
/* ===== audit fixes (contrast < 3, clipped sheet, overflow, one radius system) ===== */
.govs a,.govs a .ltr,.govs a b{color:#fff}
.guide .k,.guides .k{color:var(--gold-dk)}
.pg a,.pg span{color:#fff;background:rgba(255,255,255,.06);border-color:var(--line)}
.pg a.on,.pg a[aria-current]{background:var(--gold);color:var(--navy)}
.rs-avgbox b,.rs-avgbox{color:#fff}
.rs-save,.rs-save span{color:#fff;border-color:rgba(255,255,255,.3)}
.rs-f .pricetrig,.rs-f .pricetrig .ph{color:#fff}
.crumb-back,.crumb a,.crumb span{color:#fff}
.lfacts .lf b,.lfacts .lf b .ltr,.lfacts .lf span{color:#fff}
.lprice .big,.lprice .big .ltr{color:var(--gold)}
.lowner .nm,.lowner{color:#fff}
.lacts button,.lacts button span{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line)}
.lsafe,.lsafe b{background:rgba(202,144,81,.12);color:#fff;border-color:rgba(202,144,81,.4)}
.lsafe b{color:var(--gold-dk)}
.card.c2 .cpill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.c2 .cf1{min-width:0;overflow:hidden}
.simtrack{overflow-x:auto;scrollbar-width:none;padding:4px 0 10px}
.simtrack::-webkit-scrollbar{display:none}
.cta-add{border-radius:8px}
.mm-tiles a{border-radius:8px}
.mm-acct,.mm-app{border-radius:12px}
@media (max-width:860px){
.hero-outer.hu{overflow:visible}
.hero-outer.hu .hv,.hslides{overflow:hidden}
}
.govs a .ltr{color:var(--gold-dk)}
.govs a{color:#fff!important}
.rs-save,.rs-f .pricetrig,.rs-f.rs-fprice .pricetrig{background:var(--navy-2)!important;color:#fff!important;border:1px solid var(--line)!important}
#app .crumb-back,#app .crumb a{color:#fff!important}
.govs a,.govs a.rv.in{background:var(--navy-2)!important}
.govs a .ltr{background:none!important;color:var(--gold-dk)!important}
/* phone strip, owner 2026-10-28: two columns throughout (province+area, type+deed, rooms+price), smaller fields, search full width */
@media (max-width:860px){
.hero-outer.hu .srow .sf:nth-child(1),.hero-outer.hu .srow .sf:nth-child(2),.hero-outer.hu .srow .sf:nth-child(5){grid-column:auto}
.hero-outer.hu .sf{height:44px;padding:6px 10px;font-size:13px;line-height:14px}
.hero-outer.hu .sf .cs-sum{gap:2px}
.hero-outer.hu .sf .cs-sum::before{font-size:10px;line-height:10px}
.hero-outer.hu .sgo{grid-column:span 2;height:44px}
.hero-outer.hu .stabs button{height:30px;line-height:30px;font-size:13px}
.hero-outer.hu .aisearch-pill{height:44px}
}
/* owner 2026-10-28: logo at the right edge, burger at the left edge; the account card is the first row of the menu */
.hbar,.home-hero .hbar{display:flex!important;justify-content:space-between!important;align-items:center;grid-template-columns:none!important}
.hbar .logo{margin-inline-end:auto!important}
.htools{margin-inline-start:auto}
.mm-in{grid-template-rows:auto 1fr}
.mm-acct{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:14px 24px;align-items:center}
.mm-acct .g,.mm-acct .m{grid-template-columns:48px 1fr}
.mm-acct .g .mdw-in{grid-column:auto;width:auto;padding:0 22px;white-space:nowrap}
.mm-acct .g{grid-template-columns:48px 1fr auto}
.mm-acct .m{grid-template-columns:48px 1fr}
.mm-shortcuts{grid-template-columns:repeat(5,1fr)}
@media (max-width:860px){
.mm-acct{display:block}
.mm-acct .g{grid-template-columns:48px 1fr}
.mm-acct .g .mdw-in{grid-column:1/-1;width:100%}
.mm-shortcuts{grid-template-columns:1fr 1fr}
}
/* ===== phase 2a: the search page on the dark theme (one 8px shape, dark controls, dark empty state) ===== */
.rs-bar{background:var(--navy);border-bottom:1px solid var(--line)}
.rs-f .chipsel-box,.rs-f select,.rs-f .pricetrig,.rs-morebtn,.rs-tools select,.rs-tools button,.rs-view button,.rs-save{border-radius:8px!important;background:var(--navy-2)!important;color:#fff!important;border:1px solid var(--line)!important}
.rs-f select option{background:var(--navy-2);color:#fff}
.rs-morebtn{color:#fff!important}
.rs-chip{background:rgba(255,255,255,.08);color:#fff;border-radius:8px}
.rs-chip button{background:rgba(255,255,255,.15);color:#fff}
.rs-chipclr{color:var(--muted)}
.rs-tools .rs-view,.rs-tools [class*=view]{background:var(--navy-2);border-radius:8px}
.rs-tools button.on,.rs-view button.on{background:var(--gold)!important;color:var(--navy)!important}
.resempty{background:var(--navy-2);border:1px dashed var(--line);border-radius:8px;color:var(--muted)}
.resempty b{color:#fff}
.rs-map{border-radius:8px;border-color:var(--line);background:var(--navy-2)}
.rs-mapnote{background:rgba(17,33,63,.92);color:#fff}
.rs-avgbox{background:var(--navy-2);color:#fff;border-color:var(--line)}
.rs-avgbox div,.rs-avgbox span{color:#fff}
.leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) saturate(.9) brightness(.62) contrast(1.15)}
.leaflet-control-zoom a{background:var(--navy-2)!important;color:#fff!important;border-color:var(--line)!important}
.leaflet-control-attribution{background:rgba(17,33,63,.7)!important;color:#aab!important}
.mappin,.leaflet-marker-icon .mappin{background:var(--gold);color:var(--navy);border:0}
.crumb{color:var(--muted);font-size:13px}
.lpage h1,.rs-main h1,.sech h1{font-size:32px;line-height:41.6px;font-weight:700;letter-spacing:-.02em}
/* ===== the card, matched row by row to HomeUAE (title, location, poster, deed + age, size facts, gold price, ref) ===== */
.card.c2 .cb{gap:9px;padding:8px 14px 18px}
.card.c2 .ctitle{order:1;white-space:normal;overflow:visible;line-height:1.2;margin:0}
.card.c2 .cloc{order:2}
.card.c2 .cfoot{order:3;flex-direction:column;align-items:flex-start;gap:9px;margin:0;font-size:13px;line-height:16px;color:#fff;border:0;padding:0}
.card.c2 .cf1{display:flex;flex-wrap:wrap;gap:6px 20px;overflow:visible}
.card.c2 .cpill{background:none!important;border:0;padding:0;font-size:13px;line-height:16px;color:#fff;display:inline-flex;align-items:center;gap:8px;font-weight:400}
.card.c2 .cpill::before{content:"";width:16px;height:16px;flex:none;background:#838C9C;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.card.c2 .cpill.agency::before,.card.c2 .cpill.soft::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.card.c2 .cpill.green,.card.c2 .cpill .tabu-green{color:#fff}
.card.c2 .cpill.agency img{display:none}
.card.c2 .cf2{display:flex;gap:20px;align-items:center}
.card.c2 .csince{color:#fff;display:inline-flex;align-items:center;gap:8px}
.card.c2 .csince::before{content:"";width:16px;height:16px;flex:none;background:#838C9C;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.card.c2 .cref{display:none}
.card.c2 .cfacts{order:4;gap:20px}
.card.c2 .cfacts svg{width:16px;height:16px;color:#838C9C}
.card.c2 .cloc svg{width:16px;height:16px;color:#838C9C}
.card.c2 .cprice{order:5;margin-top:1px;justify-content:flex-start;gap:18px;align-items:baseline}
.card.c2 .cprice .p{font-size:16px;line-height:19px}
.card.c2 .cpm{font-size:13px;color:#fff}
.card.c2 .cdesc{order:6}
.card.c2 .bd{top:30px;inset-inline-start:30px}
.card.c2 .cbg{text-transform:uppercase}
.card.c2 .cfav{top:30px;inset-inline-end:30px}
.card.c2 .nophoto{background:var(--navy)}
.card.c2 .nophoto img{opacity:.35;width:120px}
.card.c2 .cfav svg,.card.c2 .cfav{width:36px;height:36px}
/* ===== phase 2b: the listing page in HomeUAE's layout (gallery 1fr/310 x 700, title 48, gold price 24, navy boxes, agent bar) ===== */
.crumb.crumb-l{background:var(--navy);border:0;margin:0;font-size:16px}
.crumb.crumb-l .wrap{padding-top:40px;padding-bottom:20px}
.lpage{background:var(--navy-2);padding-top:20px;padding-bottom:100px;max-width:none}
.lpage>.lgrid{max-width:1440px;margin:0 auto;padding:0 60px;display:grid;grid-template-columns:1fr;gap:0}
.lmain{display:flex;flex-direction:column}
.lgal{order:1;display:grid;grid-template-columns:1fr 310px;gap:20px;height:700px}
.lgal figure,.lgal .main-wrap{margin:0;height:100%;border-radius:12px;overflow:hidden;position:relative}
.lgal img.main,.lgal video.main{width:100%;height:100%;object-fit:cover;border-radius:12px;transition:transform .3s}
.lgal figure:hover img.main{transform:scale(1.05)}
.lg-side{display:grid;grid-auto-rows:107px;grid-auto-flow:row;gap:10px;overflow:hidden;padding:0;height:100%}
.lg-side img,.lg-side .lg-thumb,.lg-side>*{width:100%;height:107px;object-fit:cover;border-radius:10px;border:0;opacity:1;transition:transform .3s}
.lg-side>*:hover{transform:scale(1.03)}
.lg-side .on,.lg-side .active{outline:2px solid var(--gold);outline-offset:-2px}
.lg-all{background:rgba(17,33,63,.85);color:#fff;border-radius:8px}
.gnav{background:rgba(17,33,63,.7);color:#fff}
.gcount{background:rgba(17,33,63,.7);color:#fff;border-radius:8px}
.lside{order:2;position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;margin-top:44px}
.lside .lprice{flex:1 1 60%;background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.lside .lprice .big{color:var(--gold);font-size:24px;line-height:31px;font-weight:700}
.lside .lsafe{flex:1 1 30%;border-radius:12px}
.lowner{border-top:0;padding-top:0;margin-top:20px;background:var(--navy);border-radius:12px;padding:18px 24px}
.lbtn{border-radius:8px;font-size:15px;font-weight:700}
.lbtn.navy{background:var(--gold);color:var(--navy)}
.lbtn.navy:hover{background:var(--gold-dk);color:var(--navy)}
.lbtn.line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.lbtn.wa{background:var(--wa);color:#fff}
.lacts button{background:rgba(255,255,255,.08);color:#fff;border-color:var(--line);border-radius:8px}
.lhead{order:3;margin-top:30px}
.ltags{margin-bottom:26px}
.ltag{background:transparent;border:1px solid var(--muted);color:var(--muted);border-radius:20px;padding:8px 16px;font-size:14px;font-weight:400}
.ltag.deal{border-color:rgba(255,255,255,.6);color:#fff}
.lhead h1{font-size:48px;line-height:62px;font-weight:400;color:#fff;margin:0 0 14px}
.lloc{color:#fff;font-size:16px}
.lmeta{color:var(--muted)}
.lfacts{order:4;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin-top:30px}
.lf{background:var(--navy);border:0;border-radius:12px;padding:16px 18px}
.lf b{color:#fff;font-size:18px}
.lf span{color:var(--muted);font-size:13px}
.lsec{order:5;background:var(--navy);border:0;border-radius:12px;padding:36px 40px;margin-top:20px}
.lsec h2{color:var(--gold);font-size:24px;line-height:31px;font-weight:600;margin:0 0 30px}
.ldl div,.ldl dt,.ldl dd{border-color:var(--line);color:#fff}
.ldl .lgh{color:var(--muted);font-size:12px;letter-spacing:.08em}
.lamen li{color:#fff}
.lamen li::before,.lamen li svg{color:var(--gold)}
.ldeed{background:var(--navy)}
.ldeed li{color:#dfe4ec}
.lmap,.lsec .leaflet-container{border-radius:12px}
.simcarousel{padding:80px 0 0}
.simcarousel h2,.lpage~.wrap h2{font-size:48px;line-height:62px;font-weight:400;margin-bottom:34px}
.simtrack{gap:25px}
.simtrack .card.c2{flex:0 0 423px}
@media (min-width:1800px){ .lpage>.lgrid{padding:0 180px} }
@media (max-width:860px){
.crumb.crumb-l .wrap{padding-top:16px;padding-bottom:10px}
.lpage>.lgrid{padding:0 20px}
.lpage{padding-bottom:60px}
.lgal{grid-template-columns:1fr;height:auto}
.lgal figure{height:380px}
.lg-side{display:none}
.lside{flex-direction:column;margin-top:24px}
.lhead h1{font-size:24px;line-height:31px}
.lside .lprice .big{font-size:20px}
.lsec{padding:24px 20px}
.lsec h2{font-size:18px;margin-bottom:16px}
.ldl{grid-template-columns:1fr}
.simcarousel{padding-top:40px}
.simcarousel h2{font-size:28px;line-height:36px}
.simtrack .card.c2{flex:0 0 320px}
}
.ltag.gold{border-color:var(--gold);color:var(--gold-dk)}
/* ===== motion on every page: scroll reveal (HomeUAE: 1s ease-out, 40px), hover lifts on boxes ===== */
.hu-rv{opacity:0;transform:translateY(40px);transition:opacity 1s ease-out,transform 1s ease-out}
.hu-rv.hu-in{opacity:1;transform:none}
.card.c2.hu-rv.hu-in:hover{transform:translateY(-8px)}
.crumb.hu-rv{transform:none}
.lf,.lsec{transition:transform .3s,box-shadow .3s}
.lf:hover{transform:translateY(-4px)}
/* listing page order like HomeUAE: gallery, pills+title, price+agent, facts, boxes, safety note */
.lpage>.lgrid{display:flex;flex-direction:column}
.lmain,.lside{display:contents}
.lgal{order:1}.lhead{order:2}.lside .lprice{order:3}.lfacts{order:4}.lsec{order:5}.lside .lsafe{order:6;margin-top:20px;flex:none}
.lside .lprice{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.lside .lprice .big,.lside .lprice>.sub,.lside .lprice>small,.lside .lprice>div:not(.lowner):not(.lacts){width:100%}
.lowner{width:100%;margin-top:8px}
.lside .lbtn{width:auto;flex:0 0 auto;margin:0;padding:12px 22px}
.lacts{width:100%;grid-template-columns:repeat(3,170px);justify-content:start;margin-top:4px}
.lgal.n0{height:380px;grid-template-columns:1fr}
.lgal.n0 .nophoto{background:var(--navy);border-radius:12px;display:grid;place-items:center;height:100%}
.lgal.n0 .nophoto img{width:140px;opacity:.4}
@media (max-width:860px){ .lside .lbtn{flex:1 1 45%} .lacts{grid-template-columns:repeat(3,1fr)} .lside .lprice{margin-top:20px} }
/* size-check fixes: the live sheet has higher-specificity rules for these; pin the measured values */
html body .home-hero .hero-outer.hu .srow .sf{height:61px}
html body .home-hero .hero-outer.hu .srow .sgo{height:61px}
html body .sec h2{font-size:40px}
@media (min-width:861px) and (max-width:1400px){ html body .sec h2{font-size:35px} }
@media (min-width:1441px){ html body .sec h2{font-size:32px} }
@media (min-width:1800px){ html body .sec h2{font-size:48px} }
@media (max-width:860px){
html body .home-hero .hero-outer.hu .srow .sf{height:44px}
html body .home-hero .hero-outer.hu .srow .sgo{height:44px}
html body .home-hero .hero-outer.hu .hero h1{font-size:40px;line-height:50px}
html body .card.c2 .ph{height:211px}
html body .card.c2 .ctitle{font-size:20px;line-height:22px}
html body .res{gap:20px;grid-template-columns:1fr}
html body .sec h2{font-size:28px}
}
/* the live sheet sets these with !important / stronger selectors: match them head-on */
.hero-outer.hu{--sbar-h:61px;--sbar-h-m:44px}
html body .hero-outer.hu .hero h1{font-size:68px!important}
@media (min-width:861px) and (max-width:1400px){ html body .hero-outer.hu .hero h1{font-size:60px!important} }
@media (min-width:1441px){ html body .hero-outer.hu .hero h1{font-size:78px!important} }
@media (min-width:1800px){ html body .hero-outer.hu .hero h1{font-size:88px!important} }
html body .sec h2,html body .sec>h2{font-size:40px!important}
@media (min-width:861px) and (max-width:1400px){ html body .sec h2{font-size:35px!important} }
@media (min-width:1441px){ html body .sec h2{font-size:32px!important} }
@media (min-width:1800px){ html body .sec h2{font-size:48px!important} }
html body .res:not(.list-view){gap:25px}
@media (min-width:1441px){ html body .res:not(.list-view){gap:30px} }
@media (max-width:860px){
html body .hero-outer.hu .hero h1{font-size:40px!important;line-height:50px!important}
html body .sec h2{font-size:28px!important}
html body .res:not(.list-view){gap:20px}
html body .res:not(.list-view) .card.c2{display:flex;flex-direction:column}
html body .res:not(.list-view) .card.c2 .ph{height:211px!important;flex:none}
html body .card.c2 .ctitle{font-size:20px!important}
}
/* the listing column must stretch (the live .lgrid has align-items:start, which shrank every block to its content) */
.lpage>.lgrid{align-items:stretch}
.lpage>.lgrid>*,.lmain>*,.lside>*{width:100%;max-width:none}
.lfacts{display:grid}
.lgal:not(.n0){grid-template-columns:1fr 310px}
.lgal:not(.n0):not(:has(.lg-side)){grid-template-columns:1fr}
/* ===== 2026-10-28 real-phone rebuild (2026-10-29: list view too; the owner's phone had list view saved and its cards were 220px with the body clipped) (Samsung Z Flip 360px and every phone 320-430): the live sheet had a 150px horizontal
card, stacked facts, wrapped buttons and a video figure that pushed the listing page to 533px ===== */
@media (max-width:860px){
html body .res{grid-template-columns:1fr!important;gap:20px!important}
html body .res .card.c2,html body .simtrack .card.c2{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0;overflow:hidden;border-radius:8px}
html body .res .card.c2 .ph,html body .simtrack .card.c2 .ph{width:100%!important;height:211px!important;flex:none;position:relative;aspect-ratio:auto}
html body .res .card.c2 .ph img,html body .res .card.c2 .ph video,html body .res .card.c2 .ph .nophoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html body .res .card.c2 .ph::after{height:45%}
html body .res .card.c2 .bd{top:12px;inset-inline-start:12px;gap:6px}
html body .res .card.c2 .bd span{font-size:10px;padding:4px 8px;line-height:16px}
html body .res .card.c2 .cfav{width:40px;height:40px;top:12px;inset-inline-end:12px;background:rgba(17,33,63,.55);color:#fff}
html body .res .card.c2 .cpc{bottom:12px;inset-inline-end:12px;font-size:12px}
html body .res .card.c2 .cb{padding:16px 16px 20px!important;gap:6px;flex:1;min-width:0}
html body .res .card.c2 .ctitle{font-size:20px!important;line-height:26px;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:0}
html body .res .card.c2 .cloc{font-size:14px;line-height:22px;white-space:normal}
html body .res .card.c2 .cfacts{font-size:14px;gap:14px;margin-top:2px;min-height:22px}
html body .res .card.c2 .cfacts .cfc{display:inline-flex}
html body .res .card.c2 .cfacts svg{width:16px;height:16px}
html body .res .card.c2 .cfoot{margin-top:0;padding-top:0;font-size:13px;gap:4px}
html body .res .card.c2 .cfoot .cf2{display:flex}
html body .res .card.c2 .cfoot .cf1{min-height:0}
html body .res .card.c2 .cpill{font-size:13px;padding:0}
html body .res .card.c2 .cprice .p{font-size:18px;line-height:24px}
html body .res .card.c2 .cpm{font-size:12px}
html body .simtrack .card.c2{flex:0 0 calc(100vw - 40px)!important}
/* governorate tiles: two clean columns, the count in gold on the far side */
html body .govs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:18px}
html body .govs a{display:flex!important;justify-content:space-between!important;align-items:center;padding:12px 14px!important;font-size:14px!important;border-radius:8px!important;background:rgba(255,255,255,.05)!important;border:1px solid var(--line)!important;color:#fff!important;transform:none}
html body .govs a span{color:var(--gold)!important;font-size:13px!important}
html body .expl{grid-template-columns:1fr!important;gap:24px!important}
/* listing page: one column, nothing wider than the screen */
html body .lpage{padding:0 0 110px}
html body .lpage>.lgrid{padding:0 20px!important;margin-top:0}
html body .lmain .lgal,html body .lgal{margin:0 0 20px!important;width:100%;max-width:100%;border-radius:12px!important;overflow:hidden;background:var(--navy-2)!important;gap:0;display:block;height:auto}
html body .lgal .lg-main{width:100%!important;max-width:100%;height:auto!important;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0D1729}
html body .lgal .lg-main img,html body .lgal .lg-main video{width:100%!important;height:100%!important;max-width:100%;object-fit:cover;display:block}
html body .lgal .lg-main video.main{object-fit:contain;background:#000}
html body .lgal.n0{height:auto}
html body .lgal.n0 .nophoto{aspect-ratio:4/3;height:auto}
html body .lfacts{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin-top:20px}
html body .lfacts .lf{padding:12px 6px 10px!important;text-align:center;min-height:0;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:10px}
html body .lfacts .lf i{height:20px;display:block}
html body .lfacts .lf b{font-size:16px!important;line-height:20px}
html body .lfacts .lf span{font-size:11.5px;line-height:14px;color:var(--muted)}
html body .lside .lprice{gap:10px;margin-top:20px}
html body .lside .lbtn{flex:1 1 100%!important;width:100%;margin:0;padding:13px 12px!important;white-space:nowrap;font-size:14.5px;border-radius:8px}
html body .lside .lbtn.navy,html body .lside .lbtn#callBtn{flex:1 1 calc(50% - 5px)!important;width:auto}
html body .lacts{grid-template-columns:repeat(3,1fr)!important;gap:8px;margin-top:4px}
html body .lacts button{padding:10px 4px;border-radius:8px}
html body .lacts button span{font-size:11px}
html body .lhead h1{font-size:24px!important;line-height:31px!important}
html body .lside .lprice .big{font-size:20px!important}
html body .lsec{padding:22px 18px!important;border-radius:12px!important;margin-top:16px}
html body .lsec h2{font-size:18px!important;margin-bottom:14px}
html body .contactbar{background:var(--navy-2)!important;border-top:1px solid var(--line)!important;padding:10px 20px calc(10px + env(safe-area-inset-bottom))!important;gap:10px}
html body .contactbar a,html body .contactbar button{border-radius:8px!important;font-size:14.5px!important;padding:12px!important;white-space:nowrap}
html body .contactbar .cb-call{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid var(--line)!important}
html body .contactbar .cb-wa{background:#1FA855!important;color:#fff!important}
html body .contactbar #ph2{background:var(--gold)!important;color:var(--navy)!important}
html body .simcarousel{padding-top:40px}
html body .simcarousel h2,html body .lpage~.wrap h2{font-size:28px!important;line-height:36px!important;margin-bottom:20px}
html body .rs-main h1{font-size:28px!important;line-height:36px}
}
/* no "new" tags anywhere on the theme (owner 2026-10-28) */
html body .newtag,html body i.newtag,html body .qf-badge{display:none!important}
/* touch screens: no sticky hover lift on the cards */
@media (hover:none){ .card.c2.hu-rv.hu-in:hover,.lf:hover,.govs a:hover{transform:none} }
/* ===== maps like HomeUAE: dark CARTO tiles over the navy, gold pins with the live count, gold zoom squares ===== */
.leaflet-container{background:var(--navy)!important;font-family:var(--f)}
html body .leaflet-tile-pane{filter:none;mix-blend-mode:screen;opacity:.92}
.frame.smap{padding:0!important;overflow:hidden;border-radius:12px;position:relative;height:520px;border:1px solid var(--line)}
.frame.smap .humap{position:absolute;inset:0;z-index:1}
.frame.smap .smap-note{position:absolute;inset-inline:0;top:0;z-index:2;padding:8px 14px 14px;font-size:11.5px;color:#fff;background:linear-gradient(180deg,rgba(17,33,63,.95),rgba(17,33,63,0));pointer-events:none}
.leaflet-control-zoom{border:0!important;box-shadow:none!important;margin:0 0 16px 16px!important;display:flex;gap:8px}
.leaflet-control-zoom a,.leaflet-bar a{width:44px!important;height:44px!important;line-height:44px!important;border-radius:8px!important;background:var(--gold)!important;color:var(--navy)!important;border:0!important;font-size:22px;font-weight:400;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.leaflet-control-zoom a:hover{background:#d9a062!important}
.leaflet-control-attribution{background:rgba(17,33,63,.75)!important;color:var(--muted)!important;font-size:10px!important;padding:2px 6px!important;border-radius:6px 0 0 0}
.leaflet-control-attribution a{color:var(--gold)!important}
.hupin{position:relative;width:36px;height:36px;cursor:pointer}
.hupin i{position:absolute;left:0;top:0;width:36px;height:36px;background:var(--gold);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 8px 18px rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.55);transition:transform .25s}
.hupin b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;font-family:var(--f);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.hupin:hover i,.hupin.hot i{transform:rotate(-45deg) scale(1.12);background:#e0a665}
.leaflet-marker-icon.hupin-wrap{background:none;border:0}
.hupin-lab{position:absolute;top:36px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none}
@media (max-width:860px){ .frame.smap{height:420px} .leaflet-control-zoom{margin:0 0 12px 12px!important} .leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:40px!important} }
.rs-map .leaflet-container,.lmap .leaflet-container{border-radius:inherit}
.hupin.sm{width:22px;height:22px;opacity:.75}.hupin.sm i{width:22px;height:22px;border-width:1.5px}.hupin.sm .hupin-lab{top:22px;font-size:11px}
.leaflet-overlay-pane img.leaflet-tile{mix-blend-mode:normal}
/* home map: pin names appear on hover only (the governorate tiles beside the map carry the names) */
#humap .hupin-lab{opacity:0;transition:opacity .2s}
#humap .hupin:hover .hupin-lab,#humap .hupin.hot .hupin-lab{opacity:1}
#humap .leaflet-marker-icon:hover{z-index:1000!important}
/* ===== phase 3 (2026-10-28): every public page on the dark theme. The 360px sweep listed these white boxes with
white text inside (contact, legal, app, help, agencies, agency, projects, wanted, areas, about, post-by-message, login) ===== */
html body .crumb,html body .done2,html body .chancard,html body .blk,html body .legal-sec,html body .legal-notice,html body .gcard,html body .gcard-bd,html body .apppg-card,html body .apppg-steps,html body .pm-step,html body .agcard,html body .profcard,html body .profcard .blk,html body .wcard,html body .arx-gov,html body .arx-areas a,html body .au .aubox,html body .audone,html body .panel,html body .pcard{background:var(--navy-2)!important;color:#fff!important;border-color:var(--line)!important}
html body .crumb{border-bottom:1px solid var(--line)!important}
html body .crumb a,html body .crumb span,html body .crumb i{color:var(--muted)!important}
html body .crumb a:hover{color:#fff!important}
html body .done2 .tk,html body .audone .tk{background:rgba(202,144,81,.18)!important;color:var(--gold)!important}
html body .done2 b,html body .done2 p,html body .legal-sec h2,html body .legal-sec h3,html body .legal-sec p,html body .legal-sec li,html body .legal-intro,html body .legal-notice,html body .legal-meta,html body .legal-meta a,html body .chancard b,html body .chancard span,html body .chancard .ltr,html body .apppg-card h1,html body .apppg-card p,html body .apppg-card h3,html body .apppg-card li,html body .apppg-card span,html body .apppg-sub,html body .pm-step b,html body .pm-step p,html body .pm-id,html body .pm-id .ltr,html body .pm-ch b,html body .pm-ch small,html body .gcard b,html body .gcard p,html body .gcard-bd b,html body .profcard b,html body .profcard p,html body .profcard span,html body .profcard .bio,html body .ratingline,html body .ratingline b,html body .ratingline span,html body .wcard b,html body .wcard span,html body .wcard p,html body .arx-gov h2,html body .arx-gov h3,html body .arx-areas a,html body .arx-links a,html body .arx-more,html body .arx-more span,html body .agcard b,html body .agcard span,html body .agcard p,html body .agcard h3,html body .blk h3,html body .blk p,html body .blk label,html body .blk li,html body .blk .in,html body .changrid h3,html body .fl label,html body .auf label,html body .agree,html body .agree span,html body .agreelist{color:#fff!important}
html body .legal-meta,html body .legal-meta a,html body .profmeta .sub,html body .agcard .sub,html body .fl label,html body .auf label,html body .agreelist,html body .pm-ch small,html body .apppg-sub{color:var(--muted)!important}
html body .legal-meta a:hover,html body .arx-links a:hover{color:var(--gold)!important}
html body .legal-sec h2{color:var(--gold)!important}
html body .blk h3{border-bottom:1px solid var(--line)!important}
html body .blk h3 .n{background:var(--gold)!important;color:var(--navy)!important}
/* pills, chips and secondary buttons */
html body .ag-pills button,html body .chip.soft,html body .pm-btn,html body .btn-o,html body .arx-more,html body .arx-links a,html body .ag-filters button{background:rgba(255,255,255,.06)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .ag-pills button.on,html body .chip.soft.on,html body .ag-pills button[aria-pressed=true]{background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important}
html body .pm-btn.wa{background:#1FA855!important;color:#fff!important;border-color:transparent!important}
/* form controls on every page (not the white hero strip) */
html body .fl input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html body .fl select,html body .fl textarea,html body .auf input,html body .pw input,html body .ag-filters input,html body .blk .in>input,html body .blk .in>textarea,html body .fl .acombo .chipsel-box,html body .cf input,html body .cf textarea{background-color:var(--navy)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .fl select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important}
html body .fl select option{background:var(--navy-2);color:#fff}
html body .fl input::placeholder,html body .fl textarea::placeholder,html body .auf input::placeholder,html body .ag-filters input::placeholder{color:rgba(255,255,255,.45)}
html body .fl input:focus,html body .fl textarea:focus,html body .auf input:focus,html body .pw input:focus{border-color:var(--gold)!important;outline:none;box-shadow:0 0 0 3px rgba(202,144,81,.2)}
html body .pwtoggle{color:var(--muted)!important}
html body .fl .acombo .chev{color:var(--muted)!important}
/* the login window */
html body .au .aubox{border:1px solid var(--line)!important;box-shadow:0 30px 80px rgba(0,0,0,.5)}
html body .autabs{border-bottom:1px solid var(--line)!important}
html body .autabs button{color:var(--muted)!important;background:none!important;border-radius:0!important;border:0!important;border-bottom:2px solid transparent!important}
html body .autabs button.on{color:var(--gold)!important;border-bottom-color:var(--gold)!important}
html body .au-brand,html body .au-brand h3,html body .au-brand p{color:#fff!important}
html body .au .gold,html body .au button.gold{background:var(--gold)!important;color:var(--navy)!important}
html body .au .auf .sub,html body .au small,html body .au .ltr{color:var(--muted)}
html body .au .mdw-in{background:var(--gold)!important;color:var(--navy)!important}
/* the account-required card and the contact channels */
html body .done2 .gold,html body .done2 button:not(.line){background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important}
html body .done2 a{color:var(--gold)!important}
html body .chancardicon{box-shadow:0 0 0 4px rgba(255,255,255,.06)}
html body .cf button,html body .blk button.gold,html body .fl button.gold,html body .pm-alt .gold{background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important}
html body .arx-gov{border-radius:12px!important}
html body .arx-areas a{background:rgba(255,255,255,.06)!important;border-radius:8px!important}
html body .arx-areas a:hover{border-color:var(--gold)!important;color:var(--gold)!important}
html body .agspecs i,html body .agspecs.big i{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:6px}
html body .agchips .chip,html body .chip{background:rgba(255,255,255,.06)!important;color:#fff!important;border:1px solid var(--line)!important}
html body .wver{color:#7FD9A8!important}
html body .arx-gov h2 a,html body .arx-gov h2{color:#fff!important}
html body .autop b,html body .autop,html body .aun a,html body .au-switch a,html body .au-switch{color:#fff!important}
html body .aun a,html body .au-switch a{color:var(--gold)!important}
/* ===== 2026-10-29 phone filter sheet and its lists (owner: "the menus of search filters don't open"). The live sheet
(.rs-filters), the price/more blocks shown inline on phones and the governorate/area/type/deed bottom sheets
(.chipsel-drop.on) kept the live WHITE background while the theme turned every text white, so the lists looked empty ===== */
@media (max-width:900px){
html body .rs-filters{background:var(--navy)!important;color:#fff!important}
html body .rs-filters .rs-fh,html body .rs-filters .rs-ff{background:var(--navy)!important;border-color:var(--line)!important}
html body .rs-filters .rs-fh{border-bottom:1px solid var(--line)!important}
html body .rs-filters .rs-ff{border-top:1px solid var(--line)!important}
html body .rs-filters .rs-fh b{color:#fff!important;font-size:18px}
html body .rs-filters .rs-fx,html body .chipsel-drop.on .cs-close{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid var(--line)!important}
html body .rs-filters .rs-deal{background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;border-radius:8px!important;padding:4px}
html body .rs-filters .rs-deal button{background:transparent!important;color:var(--muted)!important;border-radius:6px!important}
html body .rs-filters .rs-deal button.on{background:var(--gold)!important;color:var(--navy)!important}
html body .rs-filters .pricepop,html body .rs-filters .rs-morepop{background:transparent!important;color:#fff!important;border:0!important;box-shadow:none!important;padding:0}
html body .rs-filters .pricepop::before,html body .rs-filters .fg h4{color:var(--gold)!important;font-size:13px;font-weight:600}
html body .rs-filters .pricepop label{color:var(--muted)!important}
html body .rs-filters .pricepop input,html body .rs-filters .fg input[type=number],html body .rs-filters .fg input[type=search],html body .rs-filters .fg select{background:var(--navy-2)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .rs-filters .rsq-b{background:var(--navy-2)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .rs-filters .rsq-b.on{background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important}
html body .rs-filters .ck{color:#fff!important}
html body .rs-filters .ck .c{color:var(--muted)!important}
html body .rs-filters .ck input{accent-color:var(--gold)}
html body .rs-filters #clrM{background:transparent!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .rs-filters #rsFApply{background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important;font-weight:700}
/* the option sheets: governorate, area, type, deed */
html body .chipsel-drop.on{background:var(--navy-2)!important;color:#fff!important;border:1px solid var(--line)!important;border-bottom:0!important;box-shadow:0 -18px 44px rgba(0,0,0,.5)!important}
html body .chipsel-drop.on::before{background:rgba(255,255,255,.25)!important}
html body .chipsel-drop.on .cs-sheet-h{background:var(--navy-2)!important;color:#fff!important;border-color:var(--line)!important}
html body .chipsel-drop.on .cs-sheet-h span{color:#fff!important;font-weight:700;font-size:16px}
html body .chipsel-drop.on .cs-sheet-q{background:var(--navy)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .chipsel-drop.on .cs-sheet-q::placeholder{color:rgba(255,255,255,.45)}
html body .chipsel-drop.on .chipsel-opt,html body .chipsel-drop.on .chipsel-opt span{color:#fff!important}
html body .chipsel-drop.on .chipsel-opt{border-bottom:1px solid rgba(255,255,255,.06);border-radius:0!important;padding:12px 10px;min-height:46px}
html body .chipsel-drop.on .chipsel-opt:active,html body .chipsel-drop.on .chipsel-opt:hover{background:rgba(255,255,255,.06)!important}
html body .chipsel-drop.on .chipsel-opt .cs-n{color:var(--gold)!important;background:rgba(202,144,81,.14)!important;border-radius:6px;padding:1px 7px}
html body .chipsel-drop.on .cs-h{color:var(--gold)!important;background:var(--navy-2)!important}
html body .chipsel-drop.on .cs-selected .chip{background:rgba(202,144,81,.18)!important;color:#fff!important;border:1px solid rgba(202,144,81,.4)!important}
html body .chipsel-drop.on .chipsel-empty{color:var(--muted)!important}
html body .chipsel-drop.on .cs-done{background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important;font-weight:700}
html body .rs-mbar{background:rgba(23,43,79,.97)!important;border:1px solid var(--line)!important;border-radius:12px!important}
html body .rs-mbar #rsMFilters{background:var(--gold)!important;color:var(--navy)!important;font-weight:700}
html body .rs-mbar button,html body .rs-mbar select{border-radius:8px!important}
}
/* the filter bar never takes the reveal transform: the phone sheet and the option sheets are position:fixed inside it,
and a transformed ancestor turns "fixed" into "relative to the bar" (taps landed 40px off while it slid in) */
html body .rs-bar.hu-rv,html body .rs-bar.hu-rv.hu-in{opacity:1!important;transform:none!important;transition:none!important}
@media (max-width:900px){
html body .chipsel-drop.on .cs-sheet-f{background:var(--navy-2)!important;border-top:1px solid var(--line)!important}
html body .chipsel-drop.on .cs-clear{background:transparent!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .chipsel-drop.on .cs-done b{color:var(--navy)!important}
}
/* phones: the option list is a bottom sheet, so the "flip upward" branch (chosen when the hero bar sits low on the screen)
must not push it above the viewport (it was at top:-334px on the themed home page) */
@media (max-width:640px){
html body .chipsel-drop.on,html body .chipsel-drop.on.flip-up,html body .home-hero .chipsel-drop.on.flip-up{top:auto!important;bottom:0!important;max-height:72vh!important;height:auto!important}
}
/* a hero bar re-drawn after a pick (softRenderHero) is marked .hu-still: its open list stays put instead of sliding in again */
html body .sbar.hu-still .chipsel-drop.on{animation:none!important} /* the list re-opened after a pick stays put instead of sliding up again */
/* phones: the field lists every chosen name (two lines in the filter sheet, one clipped line in the hero bar) */
@media (max-width:640px){
html body .rs-f .cs-compact .chipsel-box{height:auto!important;min-height:48px;padding-top:10px!important;padding-bottom:10px!important;align-items:center}
html body .rs-f .cs-compact .cs-sum{white-space:normal!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35!important;text-overflow:clip}
}
/* ===== 2026-10-29 sheet motion (owner: "appear in a nicer way … disappear in a nice way too, fading or moving, matching
the rest of the website"). Same ease-out family as the scroll reveal; a dimmed backdrop fades with the sheet ===== */
@keyframes huSheetIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes huSheetOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(40px)}}
@keyframes huDimIn{from{opacity:0}to{opacity:1}}
@keyframes huDimOut{from{opacity:1}to{opacity:0}}
@keyframes huPanelIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes huPanelOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(18px)}}
@media (max-width:640px){
html body .chipsel-drop.on{animation:huSheetIn .34s cubic-bezier(.22,.8,.3,1) both!important}
html body .sbar.hu-still .chipsel-drop.on{animation:none!important}
html body .chipsel-drop.on.out{animation:huSheetOut .26s ease-in both!important;pointer-events:none}
/* the dim sits where it can be tapped: inside the filter panel (its own stacking context) or on the body for the hero bar */
html body .chipsel-drop.on::before{content:none!important}
html body .hu-dim{position:fixed;inset:0;background:rgba(9,14,26,.55);z-index:1250;animation:huDimIn .34s ease-out both;cursor:pointer}
html body .hu-dim.out{animation:huDimOut .26s ease-in both} /* keeps catching the tap that closed it: the sheet closes on pointerdown, the click follows */
html body .rs-filters .rs-f:has(.chipsel-drop.on){position:relative;z-index:1300}
html body .sbar .chipsel-drop.on{z-index:1300}
html body .rs-filters.on{animation:huPanelIn .3s cubic-bezier(.22,.8,.3,1) both}
html body .rs-filters.on.out{animation:huPanelOut .24s ease-in both;pointer-events:none}
}
/* ===== 2026-10-29 owner round (desktop screenshot): header sides, headline -30%, the two bars, the notches ===== */
/* header: the logo at the right edge, the menu (and the post button) at the left edge, on every width */
html body .hbar,html body .home-hero .hbar{direction:rtl!important;justify-content:space-between!important}
html body .hbar .logo{order:0!important;margin:0!important}
html body .hbar .htools{order:1!important;margin:0!important}
/* the wordmark with the same depth as the mark */
html body .hbar .blogo-w b{background:linear-gradient(180deg,#FFFFFF 0%,#E6DECB 45%,#A99E85 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
html body .hbar .blogo-w small{color:#D8CBA6;text-shadow:0 1px 2px rgba(0,0,0,.5)}
html body .hbar .logo .bmark{filter:drop-shadow(0 1px 0 rgba(255,255,255,.12))}
/* headline 30% smaller (owner) */
html body .hero-outer.hu .hero h1{font-size:48px!important}
@media (min-width:861px) and (max-width:1400px){ html body .hero-outer.hu .hero h1{font-size:42px!important} }
@media (min-width:1441px){ html body .hero-outer.hu .hero h1{font-size:55px!important} }
@media (min-width:1800px){ html body .hero-outer.hu .hero h1{font-size:62px!important} }
@media (max-width:860px){ html body .home-hero .hero-outer.hu .hero h1,html body .hero-outer.hu .hero h1{font-size:28px!important;line-height:36px!important} }
/* the two bars: one width, one height, one radius; 8px apart like the tabs above the bar */
html body .hero-outer.hu .stabs{margin:20px 0 8px!important}
html body .hero-outer.hu .aisearch{margin-top:8px!important}
html body .hero-outer.hu .aisearch-pill{height:61px!important;border-radius:8px!important}
@media (max-width:860px){ html body .hero-outer.hu .aisearch-pill{height:48px!important} html body .hero-outer.hu .stabs{margin:0 0 8px!important} }
/* desktop: no notches under the bar; the fields are flat cells of one white row with one shadow */
@media (min-width:861px){
html body .hero-outer.hu .srow .sf{border-radius:0!important;box-shadow:none!important;background:#fff!important;border-bottom:0!important}
html body .hero-outer.hu .srow .sf:first-child{border-start-start-radius:8px!important;border-end-start-radius:8px!important}
html body .hero-outer.hu .srow{background:#fff!important;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)!important}
}
@media (min-width:861px){ html body .hbar,html body .home-hero .hbar{padding-left:60px!important;padding-right:60px!important} } /* HomeUAE: logo 60px from the edge */
html body .home-hero .hero-outer.hu .stabs,html body .hero-outer.hu .stabs{margin:20px 0 8px!important}
@media (max-width:860px){ html body .home-hero .hero-outer.hu .stabs,html body .hero-outer.hu .stabs{margin:0 0 8px!important} html body .hero-outer.hu .aisearch-pill{height:44px!important} }
html body.home-hero .hero-outer.hu .sbar .stabs,html body .hero-outer.hu .sbar .stabs{margin-bottom:8px!important}
html body .hero-outer.hu .aisearch{top:0!important} /* the live bar sat 5px lower; now exactly 8px under the search row */
html body .hero-outer.hu .sbar{top:0!important} /* the live bar was nudged 10px down; the AI bar then overlapped it */
@media (max-width:860px){ html body.home-hero .hero-outer.hu .aisearch .aisearch-pill,html body .hero-outer.hu .aisearch .aisearch-pill{height:44px!important;border-radius:8px!important} }
@media (max-width:860px){ html body.home-hero .hero-outer.hu .aisearch .aisearch-pill{min-height:44px!important} }
/* owner 2026-10-29 ("check this too"): the live header turns fixed on scroll (header.hdr-solid) and covered the top of
every section; HomeUAE's header scrolls away with the hero, so does ours */
html body.home-hero header.hdr-solid,html body.home-hero header{position:absolute!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
/* the spinning group turns about the mark's centre whatever its edges add to the box */
html body .bmark .bdia{transform-box:view-box!important;transform-origin:50px 50px!important}
/* the wordmark: the gradient is painted on the box, so the box gets room for the dot of ن and the tail of و (zero net size) */
html body .hbar .blogo-w b{padding:.25em .12em;margin:-.25em -.12em;line-height:1.1}
/* (the Umayyad photos' white top line is now cropped out of the files themselves, 2026-10-30: no 2% shift any more) */
/* ===== 2026-10-29 owner: desktop search bar and its popups, and the country-code picker ===== */
/* the bar: one text colour for every field (the placeholders were grey, the prices white); the active deal pill is gold */
html body .rs-f .cs-sum .ph,html body .rs-f .pricetrig .ph,html body .rs-morebtn{color:#fff!important;font-weight:600!important}
html body .rs-deal{background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;border-radius:8px!important;padding:3px!important}
html body .rs-deal button{background:transparent!important;color:var(--muted)!important;border-radius:6px!important}
html body .rs-deal button.on{background:var(--gold)!important;color:var(--navy)!important}
/* the More and Price popups on desktop were the live white panels with white text */
@media (min-width:901px){
html body .rs-morepop,html body .pricepop{background:var(--navy-2)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:0 18px 44px rgba(0,0,0,.5)!important}
html body .rs-morepop .fg h4,html body .pricepop::before{color:var(--gold)!important}
html body .rs-morepop .ck{color:#fff!important}
html body .rs-morepop .ck .c{color:var(--muted)!important}
html body .rs-morepop .ck input,html body .pricepop input{accent-color:var(--gold)}
html body .rsq-b{background:var(--navy)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .rsq-b.on{background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important}
html body .pricepop label{color:var(--muted)!important}
html body .pricepop input{background:var(--navy)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .pp-clear{color:#fff!important;background:transparent!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .pp-done{background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important}
html body .rs-morepop .fg{border-color:var(--line)!important}
}
/* the country-code picker (login, sign-up, post form): a dark list you can read, flag + name + code */
html body .ccpick-btn{background:var(--navy)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .ccpick-arrow{color:var(--muted)!important}
html body .ccpick-drop{background:var(--navy-2)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:0 18px 44px rgba(0,0,0,.5)!important;overflow:hidden}
html body .ccpick-search{background:var(--navy)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .ccpick-search::placeholder{color:rgba(255,255,255,.45)}
html body .ccpick-item{color:#fff!important;border-bottom:1px solid rgba(255,255,255,.06)}
html body .ccpick-item:hover,html body .ccpick-item.act{background:rgba(255,255,255,.06)!important}
html body .ccpick-item.on,html body .ccpick-item.sel,html body .ccpick-item[aria-selected=true]{background:rgba(202,144,81,.18)!important;color:#fff!important}
html body .ccpick-name{color:#fff!important}
html body .ccpick-iso{color:var(--muted)!important}
html body .ccpick-code{color:var(--gold)!important;font-weight:700}
html body .ccpick-empty{color:var(--muted)!important}
html body .ccpick-list::-webkit-scrollbar{width:8px} html body .ccpick-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
/* ===== 2026-10-29 owner: the side map on the search page ===== */
@media (min-width:901px){
html body .rs-body.rs-hasmap{grid-template-columns:minmax(0,1fr) 40%!important;gap:24px!important;align-items:start}
html body .rs-hasmap .res{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
html body .rs-hasmap .rs-map{position:sticky!important;top:16px!important;height:calc(100vh - 32px)!important;max-height:none!important;display:flex;flex-direction:column;border-radius:12px!important;overflow:hidden}
html body .rs-hasmap .rs-mapwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html body .rs-hasmap .rs-map .leaflet-container{flex:1 1 auto;min-height:320px;height:auto!important;border-radius:0}
html body .rs-hasmap .rs-avgbox{flex:0 0 auto;max-height:38%;overflow:auto}
}
@media (min-width:901px){ html body .rs-hasmap .rs-map{top:58px!important;height:calc(100vh - 74px)!important} } /* clears the sticky filter bar (42px) when the page scrolls */
/* ===== 2026-10-29 motion like HomeUAE (owner: "site still not moving the same way") ===== */
html body .hu-rv{opacity:0;transform:translateY(50px);transition:opacity 1s ease-out,transform 1s ease-out}
html body .hu-rv.hu-rv-t{transform:translateY(50px)}
html body .hu-rv.hu-in{opacity:1;transform:none}
html body .crumb.hu-rv{transform:none}
/* phones: nothing heavy runs behind the scroll — no Ken Burns on the hero slides, no blur behind chips and bars, no text filter */
@media (max-width:860px){
html body .hv img,html body .hv video,html body .hslides img{animation:none!important;transform:none!important}
html body .hero-outer.hu .hero h1{filter:none!important;text-shadow:0 2px 6px rgba(0,0,0,.45)}
html body .adslot-deal,html body .home-hero .aisearch.glass .aisearch-pill,html body .aisearch-pill{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .aisearch-pill{background:rgba(17,33,63,.82)!important}
html body .adslot-deal{background:rgba(13,23,41,.85)!important}
}
/* the reveal transition wins over the live card transitions; once revealed (.hu-done) hover and press use HomeUAE's .3s */
html body .hu-rv{transition:opacity 1s ease-out,transform 1s ease-out!important}
html body .hu-rv.hu-done{transition:transform .3s,box-shadow .3s,opacity .3s,background-color .3s,border-color .3s,color .3s!important}
/* HomeUAE's interaction timing everywhere: .3s on colour, background, border, shadow, transform; a light press */
html body a,html body button,html body .chip,html body .tile,html body .pill,html body .govs a,html body .lbtn,html body .cta-add,html body .card.c2,html body .mm-tiles a,html body .ag-pills button,html body .rs-deal button,html body .stabs button,html body .lacts button,html body .rsq-b,html body .chipsel-opt,html body .ccpick-item{transition:color .3s,background-color .3s,border-color .3s,box-shadow .3s,opacity .3s,transform .3s}
html body button:active:not(:disabled),html body .lbtn:active,html body .cta-add:active,html body .rs-deal button:active,html body .stabs button:active,html body .pp-done:active,html body .cs-done:active,html body #rsFApply:active{transform:scale(.97)}
/* a new page fades in; a modal rises in; desktop menus and lists drop in with Quasar's curve */
@keyframes huPage{from{opacity:0}to{opacity:1}}
html body .hu-page{animation:huPage .4s ease-out both}
@keyframes huModal{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
html body .au.on{animation:huDimIn .3s ease-out both!important}
html body .au.on .aubox{animation:huModal .32s cubic-bezier(.22,.8,.3,1) both!important}
@keyframes huDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (min-width:641px){ html body .chipsel-drop.on,html body .menu.on,html body .notifmenu.on,html body .rs-morepop,html body .pricepop:not([hidden]),html body .ccpick-drop{animation:huDrop .22s cubic-bezier(0,0,.2,1) both} }
/* photos arrive with a fade */
html body img.hu-fade{opacity:0;transition:opacity .5s ease-out}
html body img.hu-fade.hu-ld{opacity:1}
@media (min-width:861px){ html body .hero-outer.hu .srow .sf{border-inline-end:1px solid #E6E8EC!important} html body .hero-outer.hu .srow .sf:last-of-type{border-inline-end:0!important} } /* HomeUAE's light divider between fields */
/* 2026-10-29: between 861 and 1400px the row is 50px but the fields kept 61px and stuck out 11px under it (the owner's
dark squares at every divider, at 150% zoom); the fields and the search button always fill the row's height */
@media (min-width:861px){ html body .hero-outer.hu .srow .sf,html body .hero-outer.hu .srow .sgo{height:100%!important;min-height:0!important;align-self:stretch} }
/* owner 2026-10-29: a thinner AI bar, and both bars lower in the hero (desktop) */
@media (min-width:861px){
html body .home-hero .hero-outer.hu .sbar .stabs,html body .hero-outer.hu .sbar .stabs{margin-top:80px!important}
html body .hero-outer.hu .aisearch .aisearch-pill{height:46px!important;min-height:0!important}
html body .hero-outer.hu .aisearch-badge{top:4px;bottom:4px;font-size:12px}
}
@media (min-width:861px){ html body .hero-outer.hu .hero{padding-bottom:60px!important} } /* the block sits 60px lower: the headline keeps its place, the bars go down */
/* ===== 2026-10-29 footer: titled columns (owner: the governorate names were not organised) ===== */
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px 56px;margin-bottom:28px}
footer .fcol h4{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.02em}
footer .fcol a{display:block;color:#cfd6e2;text-decoration:none;font-size:13.5px;line-height:2.1;transition:color .3s}
footer .fcol a:hover{color:var(--gold)}
footer .fcol-g .fl2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
footer .fcol .fall{margin-top:8px;font-weight:700;color:#fff}
@media (max-width:860px){
footer .fgrid{grid-template-columns:1fr 1fr;gap:28px 24px}
footer .fcol-g{grid-column:1/-1}
footer .fcol-g .fl2{gap:0 16px}
footer .fcol a{font-size:14px;line-height:2.2}
}
/* owner 2026-10-29: the headline sits close above the bar (desktop), and on phones it is one line so the hero fits the screen */
@media (min-width:861px){ html body .home-hero .hero-outer.hu .sbar .stabs,html body .hero-outer.hu .sbar .stabs{margin-top:28px!important} }
@media (max-width:860px){ html body .home-hero .hero-outer.hu .hero h1,html body .hero-outer.hu .hero h1{max-width:none!important;width:auto!important;white-space:nowrap;font-size:27px!important;line-height:34px!important;margin:0 0 16px!important} }
@media (max-width:340px){ html body .home-hero .hero-outer.hu .hero h1,html body .hero-outer.hu .hero h1{font-size:24px!important;line-height:30px!important} }
/* home page order: the type tiles in 7 columns (14, 13 and 7 tiles fill their rows), the governorate chips in 4 */
@media (min-width:1100px){ html body .typegrid{grid-template-columns:repeat(7,minmax(0,1fr))!important} }
@media (min-width:861px){ html body .aboutlinks .govs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important} }
/* owner 2026-10-29: no panel behind the sections — the cards sit on the page like HomeUAE (one layer, not three) */
html body .sec,html body .sec.rv,html body .sec.rv.in,html body section.rv.in{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
@media (min-width:861px){ html body.home-hero .aboutsec .aboutlinks .govs,html body .aboutsec .aboutlinks .govs{grid-template-columns:repeat(4,minmax(0,1fr))!important} }
@media (max-width:860px){ html body.home-hero .hero-outer.hu .sbar .stabs,html body .hero-outer.hu .sbar .stabs{margin-top:0!important} html body.home-hero .hero-outer.hu .hero h1,html body .hero-outer.hu .hero h1{top:0!important;margin-bottom:20px!important} } /* phone: the headline 20px above the bar */
@media (min-width:861px){ html body .aboutsec .aboutlinks .govs{display:grid!important} }
/* owner 2026-10-29: the side map starts level with the cards (JS sets its top margin) and has no empty band above the tiles */
@media (min-width:901px){
html body .rs-hasmap .rs-mapwrap{padding:0!important}
html body .rs-hasmap .rs-map{border-radius:8px!important}
html body .rs-hasmap .rs-mapnote{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2;background:rgba(17,33,63,.9)!important;color:#fff!important;border-radius:999px!important}
html body .rs-hasmap .rs-mapwrap{position:relative}
}
@media (min-width:901px){ html body .rs-hasmap .rs-mapnote{bottom:34px!important;opacity:1!important} } /* the count pill clears the Esri attribution */
/* owner 2026-10-29: the home map's note was a full-width gradient band fading the top of the map; now a small pill */
html body .frame.smap .smap-note{inset-inline:auto!important;inset-inline-end:12px!important;top:12px!important;width:auto;max-width:calc(100% - 24px);padding:6px 12px!important;border-radius:999px!important;background:rgba(17,33,63,.88)!important;border:1px solid var(--line);font-size:11px!important;line-height:1.4}
/* owner 2026-10-29: the results head keeps one height whether or not the average-price line has something to say,
so the cards do not move up when switching between sale, rent and all */
html body .rs-sub{display:block;min-height:22px}
/* owner 2026-10-29: the side map's zoom squares sit bottom-left with the home map's 16px breathing room, not glued to the top edge */
html body .rs-map .leaflet-top.leaflet-left,html body .lmap .leaflet-top.leaflet-left{top:auto!important;bottom:0!important}
html body .rs-map .leaflet-control-zoom,html body .lmap .leaflet-control-zoom{margin:0 0 16px 16px!important}
/* owner 2026-10-29: the tools (view, sort, map) and the filter fields keep fixed places whatever the title or labels say */
@media (min-width:901px){
html body .rs-head{justify-content:space-between!important;flex-wrap:nowrap!important}
html body .rs-head .rs-ttl{flex:1 1 auto!important;min-width:0}
html body .rs-head .rs-tools{flex:0 0 auto}
html body .rs-fin .rs-f{flex:1 1 0!important;max-width:none!important;min-width:0}
html body .rs-fin .rs-f .chipsel-box,html body .rs-fin .rs-f select,html body .rs-fin .rs-f .pricetrig,html body .rs-fin .rs-morebtn{width:100%!important;box-sizing:border-box}
html body .rs-fin .rs-deal{flex:0 0 auto}
}
/* the live reveal class (html.js .rv.in{transform:none}) outranked the theme's hidden state on cards, so a re-revealed
card faded without rising; the hidden state now wins until .in is set */
/* 2026-10-29 owner: desktop must move like the phone / HomeUAE. HomeUAE desktop measured: every block rises 50px over 1s
ease-out (30px was too little to see on a wide screen) and its cards also grow from scale(.95) */
html body .hu-rv:not(.hu-in){opacity:0!important;transform:translateY(50px)!important}
html body .hu-rv.hu-rv-t:not(.hu-in){transform:translateY(50px)!important}
html body .card.c2.hu-rv:not(.hu-in),html body .gcard.hu-rv:not(.hu-in),html body .profcard.hu-rv:not(.hu-in),html body .apppg-card.hu-rv:not(.hu-in),html body .frame.hu-rv:not(.hu-in),html body .agencies-grid>.hu-rv:not(.hu-in),html body .pj-grid>.hu-rv:not(.hu-in){transform:translateY(50px) scale(.95)!important}
html body .hu-rv.hu-reset{transition:none!important}
/* ===== 2026-10-29 account page (owner: "check this page") ===== */
html body .acct-nav{background:var(--navy-2)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important}
html body .acct-nav a{color:#fff!important;border-radius:8px!important;background:transparent!important}
html body .acct-nav a span,html body .acct-nav a b{color:#fff!important}
html body .acct-nav a svg{color:var(--gold)!important}
html body .acct-nav a:hover{background:rgba(255,255,255,.06)!important}
html body .acct-nav a.on{background:rgba(202,144,81,.18)!important;color:var(--gold)!important}
html body .acct-nav a.on span{color:var(--gold)!important}
html body .acct-nav .st.st-live{background:rgba(31,168,85,.18)!important;color:#5BD68A!important}
html body .acsec{background:var(--navy-2)!important;border:1px solid var(--line)!important;border-radius:12px!important}
html body .acsec h2,html body .acsec h3{color:#fff!important}
html body .acsec h2 svg,html body .acsec h3 svg{color:var(--gold)!important}
html body .acs-sub{color:var(--gold)!important;font-weight:700!important;border-color:var(--line)!important}
html body .acct2 .btn-n,html body .acsec .btn-n{background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important;font-weight:700}
html body .acct2 .hintx,html body .acsec .hintx{color:var(--muted)!important}
html body .acs-sub.acdel-h{color:#E86A6A!important;border-color:rgba(226,75,75,.4)!important}
html body .acdel-btn{color:#E86A6A!important;border:1px solid rgba(226,75,75,.55)!important;background:transparent!important;border-radius:8px!important}
html body .acct2 .psync,html body .acct2 .xcheck{background:rgba(255,255,255,.04)!important;border:1px solid var(--line)!important;border-radius:10px!important;color:#fff!important}
html body .acct2 .memno{color:var(--muted)!important}
html body .acct-h .vbadge{background:rgba(202,144,81,.18)!important;color:var(--gold)!important}
/* ===== 2026-10-29 post form on the dark theme ===== */
html body .qfteaser.pm-card{background:var(--navy-2)!important;border:1px solid var(--line)!important;color:#fff!important;border-radius:12px!important;box-shadow:none!important}
html body .qfteaser-tx b{color:#fff!important}
html body .qfteaser-tx small{color:var(--muted)!important}
html body .qfteaser-cta{color:var(--gold)!important}
html body .steps{background:var(--navy-2)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important}
html body .steps>div{color:var(--muted)!important;background:transparent!important;border-radius:8px!important;border-color:var(--line)!important}
html body .steps>div b{color:inherit!important}
html body .steps>div.done{background:rgba(31,168,85,.16)!important;color:#5BD68A!important}
html body .steps>div.on,html body .steps>div.cur,html body .steps>div.active,html body .steps>div.now{background:var(--gold)!important;color:var(--navy)!important}
html body .bar2{background:var(--navy-2)!important;border-top:1px solid var(--line)!important;box-shadow:0 -10px 30px rgba(0,0,0,.35)!important}
html body .bar2 .btn-n{background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important;font-weight:700}
html body .bar2 .btn-n:disabled,html body .bar2 .btn-n[disabled]{background:rgba(255,255,255,.12)!important;color:var(--muted)!important}
html body .bar2 .msg.bad{color:#FF8A80!important}
html body .bar2 .msg{color:#fff!important}
html body .tipbox{background:rgba(202,144,81,.12)!important;color:#fff!important;border:1px solid rgba(202,144,81,.35)!important;border-radius:10px!important}
html body .vpick{background:rgba(255,255,255,.04)!important;border:1px dashed var(--line)!important;border-radius:12px!important;color:#fff!important}
html body .vpick-h,html body .vpick b{color:#fff!important}
html body .vadd{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .vadd b{color:#fff!important}
html body .vadd span{color:var(--muted)!important}
html body .hintx,html body .hintx.ltr{color:var(--muted)!important}
html body .tabu-green{color:#5BD68A!important}
html body .qf,html body .qfbox,html body .aifill,html body .blk .qfwrap{background:transparent!important;color:#fff!important}
html body .blk textarea,html body .blk input:not([type=checkbox]):not([type=radio]):not([type=file]),html body .blk select{background-color:var(--navy)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .blk textarea::placeholder,html body .blk input::placeholder{color:rgba(255,255,255,.45)}
html body .blk .btn-n,html body .blk button.gold{background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important}
html body .vadd .vplay{color:var(--gold)!important}
html body .qfill{background:var(--navy-2)!important;background-image:none!important;border:1px solid var(--line)!important;border-radius:12px!important;color:#fff!important;box-shadow:none!important}
html body .qfill b,html body .qfill p,html body .qfill label,html body .qfill span{color:#fff!important}
html body .qfill small,html body .qfill .hintx{color:var(--muted)!important}
html body .qfill textarea{background:var(--navy)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important}
html body .qfill textarea::placeholder{color:rgba(255,255,255,.45)}
html body .qfill button,html body .qfill .btn-n{background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important;font-weight:700}
html body .qfill svg{color:var(--gold)!important}
html body .vpick .vadd .vplay,html body .vplay{color:var(--gold)!important;background:rgba(202,144,81,.18)!important;border-radius:50%!important}
/* 2026-10-29: the owner's phone (One UI 'reduce animations') reports prefers-reduced-motion, which switched every reveal and
entrance off; HomeUAE animates regardless, so the theme no longer gates motion on that setting */
/* the live sheet switches the intro and the logo spin off under prefers-reduced-motion; the
owner's phone reports that setting and he wants the motion, as HomeUAE shows it regardless */
@media (prefers-reduced-motion:reduce){
html body .curtain{display:grid!important}
html body .hbar .logo .bmark .bdia{animation:hdrDiaSpin 10s cubic-bezier(.65,0,.35,1) 2s infinite!important}
html body .curtain .bmark .bdia{animation:diaSpin 1.25s cubic-bezier(.25,.6,.2,1) .05s both!important}
html body .curtain.done .bmark .bdia{animation:diaSpinOut .85s cubic-bezier(.6,0,.2,1) forwards!important}
}
/* 2026-10-29: the theme's revealed state is .hu-in (the live reveal also uses .in on the same cards and set it early) */
/* ===== 2026-10-29 sign-up form (owner: "check this page") ===== */
html body .au .au-type{background:rgba(255,255,255,.04)!important;border:1px solid var(--line)!important;border-radius:10px!important;color:#fff!important}
html body .au .au-type b{color:#fff!important}
html body .au .au-type span,html body .au .au-type small{color:var(--muted)!important}
html body .au .au-type.on{border-color:var(--gold)!important;background:rgba(202,144,81,.14)!important}
html body .au .au-type.on b{color:var(--gold)!important}
html body .au .auf select{background-color:var(--navy)!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:left 12px center!important;appearance:none;-webkit-appearance:none}
html body .au .auf select option{background:var(--navy-2);color:#fff}
html body .au .au-legal a,html body .au .agree a{color:var(--gold)!important;text-decoration:underline;text-underline-offset:3px}
html body .au .au-terms summary{color:var(--gold)!important;cursor:pointer}
html body .au .au-terms,html body .au .agreelist{color:#fff!important}
html body .au .agreelist li{color:var(--muted)!important}
html body .au .aub,html body .au button.aub{background:var(--gold)!important;color:var(--navy)!important;border-radius:8px!important;font-weight:700}
html body .au .aub:disabled{background:rgba(255,255,255,.12)!important;color:var(--muted)!important}
html body .au .auerr{color:#FF8A80!important}
html body .au .aun,html body .au .hintx{color:var(--muted)!important}
html body .au .agree input[type=checkbox]{accent-color:var(--gold)}
/* the window's own scrollbar in the dark */
html body .au .aubox,html body .au .au-main,html body .au .aubody{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
html body .au .aubox::-webkit-scrollbar,html body .au .au-main::-webkit-scrollbar,html body .au .aubody::-webkit-scrollbar{width:8px}
html body .au .aubox::-webkit-scrollbar-thumb,html body .au .au-main::-webkit-scrollbar-thumb,html body .au .aubody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:4px}
html body .au .aubox::-webkit-scrollbar-track,html body .au .au-main::-webkit-scrollbar-track,html body .au .aubody::-webkit-scrollbar-track{background:transparent}
/* 2026-10-29 owner (desktop): "only the headline moves on opening". The header and bar entrances ran while the curtain was still
covering them (it faded 1.45-2.05s). The curtain now fades right after the word lifts and the entrances start once it is gone. */
/* 2026-10-30 owner: the turning logo is back. The curtain now fades quickly once the word lifts (from ~1.15s to 1.65s) and the
entrances wait for it (base 1.35s in heroChoreo), so the header and the search bar are seen moving, not hidden under it */
html body .curtain{transition:opacity .5s ease .2s!important}
/* 2026-10-29 owner: the video's remove "x" in the post form was a bare browser button (white block, invisible x on the dark
theme). Same round dark button as the photo thumbnails' remove */
html body .vprev .rm{position:absolute;top:6px;inset-inline-end:6px;width:26px;height:26px;padding:0;border-radius:50%!important;background:rgba(13,23,41,.85)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;font-size:12px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
html body .vprev .rm:hover{background:rgba(202,144,81,.95)!important;color:#1A1206!important}
/* 2026-10-29 owner (listing page as the poster): the labels under the save/share/report icons carried the button's
translucent background as boxes of their own, and the owner's three tools stacked loosely on the right */
html body .lacts button span{background:none!important;border:0!important;padding:0!important}
html body .lside .lown{display:flex!important;flex-wrap:wrap;gap:10px;flex:1 1 100%;width:100%;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)!important}
html body .lside .lown .lbtn{flex:1 1 0!important;width:auto;min-width:140px;padding:12px 14px!important;white-space:nowrap;text-align:center}
html body .lside .lown #delOwn{border-color:rgba(226,92,92,.55)!important;color:#F08A8A!important}
@media (max-width:860px){ html body .lside .lown .lbtn{flex:1 1 100%!important} }
/* post saved screen: one gold action + one outlined, same height, side by side */
html body .done2 .tk{border:2px solid rgba(202,144,81,.55)!important}
html body .done2 .done-acts>button{height:48px;border-radius:8px!important;font-weight:700;word-spacing:2px}
html body .done2 .done-acts>button.line{background:transparent!important;color:#fff!important;border:1px solid rgba(202,144,81,.6)!important}
html body .done2 .done-acts>button.line:hover{background:rgba(202,144,81,.12)!important;color:var(--gold)!important}
@media (max-width:520px){ html body .done2 .done-acts>button{flex:1 1 100%} }
/* my listings: the action bar under each card was white with white text */
html body .mineBar{gap:8px;margin-top:10px}
html body .mineBar .ab{background:transparent!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important;padding:7px 14px!important;font-weight:600}
html body .mineBar .ab:hover{border-color:var(--gold)!important;color:var(--gold)!important}
html body .mineBar .ab.bad{color:#F08A8A!important;border-color:rgba(226,92,92,.5)!important}
html body .mineBar .ab.bad:hover{background:rgba(226,92,92,.1)!important;color:#F5A3A3!important}
html body .mineBar .ab.rwuse{background:var(--gold)!important;color:var(--navy)!important;border-color:var(--gold)!important}
html body .mineBar .st{background:rgba(255,255,255,.06)!important;border:1px solid var(--line)!important;color:#fff!important;border-radius:999px!important;padding:3px 10px!important}
html body .mineBar .st-live{background:rgba(46,163,107,.16)!important;border-color:rgba(46,163,107,.45)!important;color:#7FD9A8!important}
html body .mineBar .st-pending{background:rgba(202,144,81,.14)!important;border-color:rgba(202,144,81,.45)!important;color:var(--gold)!important}
/* card pills: line-height 16px + overflow hidden cut the tail of the last letter («أخضر») — room inside, same outer size */
html body .card.c2 .cpill{padding-block:3px 5px!important;margin-block:-3px -5px!important;padding-inline-end:3px!important}
/* dropdown keyboard/hover row: was a white bar with gold text on the dark list */
html body .chipsel-drop .chipsel-opt.act,html body .chipsel-drop .chipsel-opt:hover{background:rgba(202,144,81,.16)!important;color:#fff!important}
html body .chipsel-drop .chipsel-opt.act span,html body .chipsel-drop .chipsel-opt:hover span{color:#fff!important}
html body .chipsel-drop .chipsel-opt.act .cs-n,html body .chipsel-drop .chipsel-opt:hover .cs-n{background:rgba(202,144,81,.22)!important;color:var(--gold)!important}
html body .hero-outer.hu .chipsel-drop .chipsel-opt.act,html body .hero-outer.hu .chipsel-drop .chipsel-opt:hover{background:rgba(202,144,81,.14)!important;color:var(--navy)!important}
html body .hero-outer.hu .chipsel-drop .chipsel-opt.act span,html body .hero-outer.hu .chipsel-drop .chipsel-opt:hover span{color:var(--navy)!important}
/* saved-search button: saved state is gold and clickable again to remove */
html body .rs-save.on,html body .rs-save.on span{color:var(--gold)!important;border-color:rgba(202,144,81,.6)!important}
html body .rs-save.on svg{fill:var(--gold)}
html body .pwa-toast{border:1px solid rgba(202,144,81,.5);background:var(--navy-2)!important;border-radius:14px!important;max-width:min(560px,calc(100vw - 24px));text-align:start;line-height:1.5}
html body .pwa-toast button{white-space:nowrap}
/* results-page lists: the sticky governorate heading kept the light theme's white bar */
html body .rs-f .chipsel-drop .cs-h{background:var(--navy-2)!important;color:var(--gold)!important;border-bottom:1px solid var(--line);font-size:12px}
html body .rs-f .chipsel-drop .cs-h.cs-kind{background:transparent!important;color:var(--muted)!important;border:0}
/* selected-filter chips under the search bar: had zero spacing, so they touched the filter row and sat on the divider line */
html body .rs-bar .rs-chips{padding-top:12px!important;padding-bottom:14px!important;gap:8px!important;align-items:center}
html body .rs-chip{height:34px;padding-block:0!important;padding-inline:12px 5px!important;gap:8px;border-radius:999px!important;background:rgba(202,144,81,.12)!important;border:1px solid rgba(202,144,81,.4);color:#fff!important;font-size:13px;font-weight:600;line-height:1}
html body .rs-chip button{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;font-size:12px}
html body .rs-chip button:hover{background:rgba(226,92,92,.35)!important}
html body .rs-chipclr{margin-inline-start:4px;color:rgba(255,255,255,.7)!important;font-size:13px}
html body .rs-chipclr:hover{color:var(--gold)!important}
/* 2026-10-30 (owner): the hero's «ابحث» rose 2px on hover and showed the white search row under it; it stays in place and only
lightens a little, in the theme's own gold (the old #D6952A orange belonged to the previous look) */
html body .hero-outer.hu .srow .sgo:hover,html body .hero-outer.hu .srow .sgo:active{transform:none!important;background:#D49C5E!important}
/* ===== home hero entrance, one system (2026-10-30 owner: "clean up the code, the old with the new is confusing"). heroEnter()
in index.html gives each block .hu-enter and its own start (--enter-d) once per arrival on the home page: after the opening
curtain on the first load, at once when the visitor comes back. Nothing else animates these blocks. ===== */
@keyframes huEnterUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes huEnterDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
html body .hu-enter{animation:huEnterUp 1s ease-out both!important;animation-delay:var(--enter-d,0ms)!important}
html body header.hu-enter{animation-name:huEnterDown!important}
/* ===== «روّج إعلانك» /promote (2026-10-30): the approved mock (_mockups/sponsor), every class prefixed sp- so nothing else
on the site touches it; headings in Reem Kufi like the hero, text in the site's own font ===== */
.spg{--sp-gold:#CA9051;--sp-gold-l:#E3B57E;--sp-navy:#11213F;--sp-navy2:#172B4F;--sp-line:rgba(255,255,255,.12);--sp-line2:rgba(255,255,255,.2);--sp-mut:#9AA6BC;--sp-ok:#5BD68A;--sp-ease:cubic-bezier(.22,.8,.3,1);color:#fff;font-size:16px;line-height:1.75;overflow-x:hidden}
.spg .sp-w{max-width:1200px;margin:0 auto;padding-inline:60px}
.spg h1,.spg h2,.spg h3{font-family:"Reem Kufi",var(--f);font-weight:700;line-height:1.25;color:#fff;margin:0}
.spg h2{font-size:42px;margin-top:10px;text-wrap:balance}
.spg p,.spg ul,.spg figure{margin:0}
.spg .sp-gold{color:var(--sp-gold);display:inline}
.spg .sp-eye{display:flex;align-items:center;gap:10px;color:var(--sp-gold);font-size:13px;font-weight:700;letter-spacing:.02em}
.spg .sp-eye::before{content:"";width:28px;height:1px;background:var(--sp-gold)}
.spg .sp-lede{color:var(--sp-mut);font-size:17px;max-width:520px;margin-top:10px}
.spg .sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:8px;font-weight:700;font-size:16px;cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;white-space:nowrap;text-decoration:none}
.spg .sp-btn.gold{background:var(--sp-gold);color:var(--sp-navy)}.spg .sp-btn.gold:hover{background:var(--sp-gold-l)}
.spg .sp-btn.line{border-color:var(--sp-line2);color:#fff;background:rgba(17,33,63,.35)}.spg .sp-btn.line:hover{border-color:var(--sp-gold);color:var(--sp-gold-l)}
.spg .sp-btn:focus-visible,.spg .sp-jump a:focus-visible,.spg .sp-seg button:focus-visible{outline:2px solid var(--sp-gold-l);outline-offset:2px}
/* hero */
.spg .sp-hero{position:relative;padding-top:56px;overflow:hidden}
.spg .sp-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 15% 30%,rgba(202,144,81,.10),transparent 70%);pointer-events:none}
.spg .sp-hgrid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.spg .sp-hero h1{font-size:58px;margin-top:14px;text-wrap:balance}.spg .sp-hero h1 em{font-style:normal;color:var(--sp-gold)}
.spg .sp-hero p{color:#D5DCE8;font-size:18px;max-width:540px;margin-top:14px}
.spg .sp-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.spg .sp-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.25fr 1fr;gap:14px;height:520px}
.spg .sp-f{border:1px solid var(--sp-line);padding:7px;border-radius:14px;background:rgba(255,255,255,.02);position:relative}
.spg .sp-f:first-child{grid-column:1/3}
.spg .sp-f i{display:block;height:100%;border-radius:9px;background:#0d1a33 center/cover}
.spg .sp-f span{position:absolute;inset:auto 18px 16px 18px;font-size:13px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.spg .sp-f span b{display:block;font:700 17px "Reem Kufi",var(--f)}
.spg .sp-stats{display:flex;gap:44px;margin-top:70px;padding-block:26px;border-block:1px solid var(--sp-line)}
.spg .sp-stats div b{display:block;font-size:34px;line-height:1;color:#fff}.spg .sp-stats div span{color:var(--sp-mut);font-size:14px}
.spg .sp-note{margin-inline-start:auto;align-self:flex-end;color:var(--sp-mut);font-size:12.5px}
/* in-page navigation */
.spg .sp-jump{position:sticky;top:var(--sp-top,0px);z-index:20;background:rgba(17,33,63,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--sp-line);margin-top:40px}
.spg .sp-jump .sp-w{display:flex;align-items:center;gap:6px;height:58px;overflow-x:auto;scrollbar-width:none}.spg .sp-jump .sp-w::-webkit-scrollbar{display:none}
.spg .sp-jump a{white-space:nowrap;padding:7px 14px;border-radius:999px;color:#C9D2E1;font-size:14.5px;font-weight:600;text-decoration:none}
.spg .sp-jump a:hover{color:#fff;background:rgba(255,255,255,.07)}
.spg .sp-jump .sp-go{margin-inline-start:auto;background:var(--sp-gold);color:var(--sp-navy)}.spg .sp-jump .sp-go:hover{background:var(--sp-gold-l);color:var(--sp-navy)}
.spg .sp-s{padding-top:110px}
.spg .sp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
/* where it appears */
.spg .sp-show{display:grid;grid-template-columns:1.05fr .9fr 1.05fr;gap:28px;margin-top:48px;align-items:end}
.spg .sp-place figcaption{margin-top:16px}.spg .sp-place figcaption b{display:block;font-size:17px}.spg .sp-place figcaption span{color:var(--sp-mut);font-size:14.5px}
.spg .sp-frame{border:1px solid var(--sp-line);padding:8px;border-radius:14px;background:rgba(255,255,255,.02)}
.spg .sp-card{background:var(--sp-navy2);border-radius:10px;overflow:hidden}
.spg .sp-ph{position:relative;aspect-ratio:4/3;background:#0d1a33 center/cover}
.spg .sp-feat{position:absolute;top:12px;inset-inline-start:12px;background:var(--sp-gold);color:var(--sp-navy);font-weight:800;font-size:12.5px;padding:4px 11px;border-radius:999px}
.spg .sp-bd{padding:14px 16px 16px}.spg .sp-bd b{font-size:16px;display:block}.spg .sp-pl2{color:var(--sp-mut);font-size:13px}
.spg .sp-cpr{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px}.spg .sp-cpr strong{color:var(--sp-gold);font-size:19px}.spg .sp-cpr small{color:var(--sp-mut);font-size:12.5px}
.spg .sp-phone{width:100%;max-width:300px;margin-inline:auto;border-radius:34px;border:1px solid var(--sp-line2);padding:10px;background:#0a1428;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.spg .sp-reel{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:9/16;background:#000}
.spg .sp-poster{position:absolute;inset:0;background:#000 center/cover;display:grid;place-items:center;text-decoration:none}
.spg .sp-play{width:64px;height:64px;border-radius:50%;background:rgba(17,33,63,.55);border:2px solid #fff;position:relative;transition:transform .2s var(--sp-ease),background .2s}
.spg .sp-play::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;transform:translateX(3px)}
.spg .sp-poster:hover .sp-play{transform:scale(1.06);background:var(--sp-gold)}
.spg .sp-fbtag{position:absolute;bottom:14px;inset-inline:14px;text-align:center;font-size:12.5px;font-weight:700;background:rgba(17,33,63,.75);border:1px solid var(--sp-line2);border-radius:999px;padding:6px 10px;color:#fff}.spg .sp-fbtag b{color:var(--sp-gold)}
.spg .sp-square{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1/1;background:#0d1a33 center/cover}
.spg .sp-square::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(17,33,63,.95))}
.spg .sp-square .sp-in{position:absolute;z-index:2;inset:auto 18px 18px 18px}
.spg .sp-square .sp-ad{position:absolute;z-index:2;top:12px;inset-inline-end:12px;font-size:11px;background:rgba(17,33,63,.7);border:1px solid var(--sp-line2);border-radius:999px;padding:2px 9px}
.spg .sp-square .sp-in small{color:var(--sp-gold);font-weight:700;font-size:13px}.spg .sp-square .sp-in b{display:block;font:700 22px/1.3 "Reem Kufi",var(--f);margin-top:2px}.spg .sp-square .sp-in span{color:#D5DCE8;font-size:13.5px}
.spg .sp-proof{display:grid;grid-template-columns:1.1fr repeat(3,1fr);margin-top:56px;border-block:1px solid var(--sp-line)}
.spg .sp-proof>*{padding:24px 22px}.spg .sp-proof>*+*{border-inline-start:1px solid var(--sp-line)}
.spg .sp-pp p{color:var(--sp-mut);font-size:14.5px;margin-top:6px}
.spg .sp-rl{text-decoration:none;color:#fff}.spg .sp-rl b{font-size:40px;line-height:1;color:var(--sp-gold)}.spg .sp-rl em{font-style:normal;color:var(--sp-mut);font-size:14px;margin-inline-start:8px}
.spg .sp-rl span{display:block;margin-top:10px;font-size:15px}.spg .sp-rl small{display:block;color:var(--sp-mut);font-size:13px;margin-top:4px}.spg .sp-rl small i{font-style:normal}
.spg .sp-rl:hover b{color:var(--sp-gold-l)}
/* plans */
.spg .sp-seg{display:inline-flex;padding:5px;border:1px solid var(--sp-line2);border-radius:999px;background:rgba(255,255,255,.03)}
.spg .sp-seg button{border:0;background:none;color:#C9D2E1;font-weight:700;font-size:15px;font-family:inherit;padding:10px 20px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.spg .sp-seg button.on{background:var(--sp-gold);color:var(--sp-navy)}
.spg .sp-plan .sp-pl{margin-top:26px}
.spg .sp-opts{margin-top:22px;border-top:1px solid var(--sp-line)}
.spg .sp-opt{display:grid;grid-template-columns:260px 1fr auto;gap:36px;align-items:center;padding-block:30px;border-bottom:1px solid var(--sp-line)}
.spg .sp-im{aspect-ratio:16/10;border-radius:10px;background:#0d1a33 center/cover;border:1px solid var(--sp-line)}
.spg .sp-opt h3{font-size:26px}.spg .sp-opt p{color:#C9D2E1;margin-top:6px;max-width:560px}
.spg .sp-opt ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;color:var(--sp-mut);font-size:14.5px}
.spg .sp-opt ul li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sp-gold);margin-inline-end:8px;vertical-align:middle}
.spg .sp-opt ul b{color:#fff}
.spg .sp-pr{text-align:end;min-width:150px}.spg .sp-pr>div>b{display:block;font-size:34px;line-height:1}
.spg .sp-pr em{display:block;font-style:normal;color:var(--sp-mut);font-size:12.5px;margin-top:6px}
.spg .sp-pr .sp-btn{margin-top:14px;height:44px;padding:0 22px;font-size:14.5px}
.spg .sp-opt.hi .sp-pr>div>b{color:var(--sp-gold)}
.spg .sp-ex{margin-top:10px;font-size:14px;color:var(--sp-mut)!important}.spg .sp-ex b{color:#fff}.spg .sp-ex a{color:var(--sp-gold);text-decoration:underline;text-underline-offset:3px}
.spg .sp-tag{display:inline-block;margin-inline-start:10px;vertical-align:middle;font-size:12px;font-weight:700;font-family:var(--f);color:var(--sp-navy);background:var(--sp-gold);border-radius:999px;padding:3px 10px}
.spg .sp-band{margin-top:22px;border-radius:16px;overflow:hidden;min-height:440px;display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--sp-line)}
.spg .sp-pic{display:grid;grid-template-rows:1fr 1fr;gap:2px;background:var(--sp-line)}.spg .sp-pic i{background:#0d1a33 center/cover}
.spg .sp-tx{background:var(--sp-navy2);padding:44px 44px 40px;display:flex;flex-direction:column}
.spg .sp-tx h3{font-size:30px}.spg .sp-tx p{color:#C9D2E1;margin-top:8px}
.spg .sp-tiers{margin-block:24px 28px;border-top:1px solid var(--sp-line)}
.spg .sp-tier{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--sp-line)}
.spg .sp-tier b{font-size:17px}.spg .sp-tier span{display:block;color:var(--sp-mut);font-size:13.5px}.spg .sp-tier strong{font-size:22px;white-space:nowrap}.spg .sp-tier strong small{font-size:13px;color:var(--sp-mut);font-weight:400}
.spg .sp-tx .sp-btn{margin-top:auto;align-self:flex-start}
/* team & services */
.spg .sp-svc{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--sp-line)}
.spg .sp-sv{padding:30px 28px 30px 0;border-bottom:1px solid var(--sp-line)}
.spg .sp-sv:not(:nth-child(3n+1)){border-inline-start:1px solid var(--sp-line);padding-inline-start:28px}
.spg .sp-sv i{width:48px;height:48px;border-radius:12px;border:1px solid rgba(202,144,81,.45);display:grid;place-items:center;color:var(--sp-gold);background:rgba(202,144,81,.06)}
.spg .sp-sv i svg,.spg .sp-pt i svg{width:22px;height:22px}.spg .sp-sv b{display:block;font-size:19px;margin-top:16px}.spg .sp-sv p{color:var(--sp-mut);font-size:15px;margin-top:6px;max-width:320px}
.spg .sp-svccta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px;padding:22px 26px;border:1px solid var(--sp-line);border-radius:14px;background:var(--sp-navy2)}
.spg .sp-svccta span{color:#C9D2E1}
.spg .sp-more{margin-top:34px}.spg .sp-more>b{display:block;font-size:17px;color:var(--sp-gold)}
.spg .sp-more ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;margin-top:8px}
.spg .sp-more li{padding:14px 0;border-bottom:1px solid var(--sp-line)}.spg .sp-more li strong{display:block;font-size:16px}.spg .sp-more li span{color:var(--sp-mut);font-size:14px}
/* how it works + report */
.spg .sp-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid var(--sp-line)}
.spg .sp-steps.s3{grid-template-columns:repeat(3,1fr)}.spg .sp-show.one{grid-template-columns:minmax(0,340px);justify-content:center} /* the app's /promote: three steps, one figure */
.spg .sp-step{padding-top:26px}.spg .sp-step+.sp-step{border-inline-start:1px solid var(--sp-line);padding-inline-start:26px}.spg .sp-step:not(:last-child){padding-inline-end:26px}
.spg .sp-step em{font-size:15px;font-weight:700;font-style:normal;color:var(--sp-gold)}.spg .sp-step b{display:block;font-size:19px;margin-top:6px}.spg .sp-step p{color:var(--sp-mut);font-size:14.5px;margin-top:4px}
.spg .sp-report{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;margin-top:70px}
.spg .sp-sub{font-size:28px}
.spg .sp-pts{display:grid;gap:22px;margin-top:26px}
.spg .sp-pt{display:grid;grid-template-columns:44px 1fr;gap:14px}.spg .sp-pt i{width:44px;height:44px;border-radius:10px;border:1px solid var(--sp-line2);display:grid;place-items:center;color:var(--sp-gold)}
.spg .sp-pt b{font-size:17px}.spg .sp-pt p{color:var(--sp-mut);font-size:15px}
.spg .sp-rep{background:var(--sp-navy2);border:1px solid var(--sp-line);border-radius:14px;padding:26px}
.spg .sp-rh{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--sp-line)}
.spg .sp-rh i{width:58px;height:44px;border-radius:6px;background:#0d1a33 center/cover;flex:none}.spg .sp-rh b{display:block}.spg .sp-rh span{color:var(--sp-mut);font-size:13px}
.spg .sp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.spg .sp-kpis b{display:block;font-size:26px;line-height:1.1}.spg .sp-kpis span{color:var(--sp-mut);font-size:12.5px}.spg .sp-kpis div:last-child b{color:var(--sp-ok)}
.spg .sp-bars{display:flex;align-items:flex-end;gap:12px;height:130px;margin-top:22px;padding-top:10px;border-top:1px dashed var(--sp-line)}
.spg .sp-bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.spg .sp-bars i{display:block;width:100%;max-width:38px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--sp-gold-l),var(--sp-gold))}
.spg .sp-bars span{color:var(--sp-mut);font-size:12px}
/* faq */
.spg .sp-faqw{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.spg .sp-faq{border-top:1px solid var(--sp-line)}.spg .sp-faq details{border-bottom:1px solid var(--sp-line)}
.spg .sp-faq summary{list-style:none;cursor:pointer;padding:20px 0;font-size:18px;font-weight:700;display:flex;justify-content:space-between;gap:20px}
.spg .sp-faq summary::-webkit-details-marker{display:none}.spg .sp-faq summary::after{content:"+";color:var(--sp-gold);font-size:26px;font-weight:400;line-height:1}
.spg .sp-faq details[open] summary::after{content:"−"}.spg .sp-faq p{color:#C9D2E1;padding-bottom:20px;max-width:620px}
/* closing */
.spg .sp-close{position:relative;margin-top:110px;min-height:440px;display:flex;align-items:center;overflow:hidden}
.spg .sp-cbg{position:absolute;inset:0;background:center/cover}
.spg .sp-close::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(17,33,63,.97) 0%,rgba(17,33,63,.9) 50%,rgba(17,33,63,.4) 100%)}
[dir=ltr] .spg .sp-close::after{background:linear-gradient(90deg,rgba(17,33,63,.97) 0%,rgba(17,33,63,.9) 50%,rgba(17,33,63,.4) 100%)}
.spg .sp-close .sp-w{position:relative;z-index:2;width:100%}
.spg .sp-close h2{max-width:640px}
.spg .sp-rules{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;color:#C9D2E1;font-size:14.5px}
.spg .sp-rules span::before{content:"✓";color:var(--sp-gold);margin-inline-end:8px;font-weight:700}
.spg .sp-credit{color:rgba(255,255,255,.4);font-size:12px;padding-block:16px 26px}
@media (max-width:1000px){
.spg .sp-w{padding-inline:20px}
.spg .sp-hero{padding-top:30px}.spg .sp-hgrid{grid-template-columns:1fr;gap:34px}.spg .sp-hero h1{font-size:40px}.spg .sp-hero p{font-size:16px}
.spg .sp-collage{height:380px;gap:10px}.spg .sp-f{padding:5px}.spg .sp-f span{inset:auto 12px 10px 12px;font-size:12px}.spg .sp-f span b{font-size:15px}
.spg .sp-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px;margin-top:40px}.spg .sp-stats div b{font-size:26px}.spg .sp-note{grid-column:1/-1;width:100%;margin:0}
.spg h2{font-size:30px}.spg .sp-s{padding-top:76px}
.spg .sp-show{grid-template-columns:1fr;gap:34px}.spg .sp-show .sp-place:nth-child(2){order:-1}
.spg .sp-proof{grid-template-columns:1fr}.spg .sp-proof>*{padding:18px 0}.spg .sp-proof>*+*{border-inline-start:0;border-top:1px solid var(--sp-line)}
.spg .sp-opt{grid-template-columns:1fr;gap:16px}.spg .sp-pr{text-align:start;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}.spg .sp-pr .sp-btn{margin:0}
.spg .sp-band{grid-template-columns:1fr}.spg .sp-pic{min-height:360px}.spg .sp-tx{padding:26px 20px}.spg .sp-tx .sp-btn{align-self:stretch}
.spg .sp-svc{grid-template-columns:1fr}.spg .sp-sv,.spg .sp-sv:not(:nth-child(3n+1)){padding:22px 0;border-inline-start:0}
.spg .sp-more ul{grid-template-columns:1fr}
.spg .sp-svccta{padding:18px}.spg .sp-svccta .sp-btn{flex:1 1 100%}
.spg .sp-report{grid-template-columns:1fr;gap:30px}
.spg .sp-faqw{grid-template-columns:1fr;gap:20px}.spg .sp-seg{width:100%}.spg .sp-seg button{flex:1;padding:10px 8px;font-size:14px}
.spg .sp-jump{margin-top:30px}.spg .sp-jump .sp-go{display:none}.spg .sp-kpis{grid-template-columns:repeat(2,1fr);row-gap:16px}
.spg .sp-steps{grid-template-columns:1fr 1fr}.spg .sp-step,.spg .sp-step+.sp-step,.spg .sp-step:not(:last-child){padding:22px 0 0;border:0}.spg .sp-steps .sp-step:nth-child(even){border-inline-start:1px solid var(--sp-line);padding-inline-start:18px}.spg .sp-steps .sp-step:nth-child(odd){padding-inline-end:18px}
.spg .sp-steps.s3{grid-template-columns:1fr}.spg .sp-steps.s3 .sp-step:nth-child(n){border-inline-start:0;padding-inline:0}.spg .sp-show.one{grid-template-columns:1fr}
.spg .sp-close{min-height:0;padding-block:70px;margin-top:76px}.spg .sp-close::after{background:linear-gradient(180deg,rgba(17,33,63,.7),rgba(17,33,63,.96))!important}
.spg .sp-btn{height:50px}.spg .sp-hero .sp-acts .sp-btn,.spg .sp-close .sp-acts .sp-btn{flex:1 1 100%}
}
.spg .sp-place figcaption span b{display:inline}
/* «إعلاناتي»: one line to the promotion page; the search results' card ad in «full photo» layout (2026-10-30) */
html body .mine-promo{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:12px 16px;border:1px solid rgba(202,144,81,.45);border-radius:10px;background:rgba(202,144,81,.07);color:#fff;text-decoration:none;font-size:14.5px}
html body .mine-promo .mi,html body .mine-promo svg{width:20px;height:20px;color:var(--gold);flex:none}
html body .mine-promo span{flex:1;color:#D5DCE8}html body .mine-promo b{color:var(--gold);white-space:nowrap}
html body .mine-promo:hover{border-color:var(--gold)}
html body .res-ad.full{position:relative;padding:0;min-height:320px} /* beside other cards it takes their row's height; alone on a phone row it is 4:5 */
@media (max-width:640px){html body .res:not(.list-view) .res-ad.full{aspect-ratio:4/5}}
html body .res .card.c2.res-ad.full .ph{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important}
html body .res .card.c2.res-ad.full .ph img,html body .res .card.c2.res-ad.full .ph video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover}
html body .res.list-view .res-ad.full{aspect-ratio:auto;min-height:260px}
/* phones: on the search page the WhatsApp bubble sits above the filters / map / sort bar instead of over its last button (2026-10-30) */
@media (max-width:900px){ html body .wa-fab.wa-up{bottom:calc(86px + env(safe-area-inset-bottom))} }
/* «مطلوب»: every request card the same height, whatever its text, on every width (owner 2026-10-30); the poster line stays at the bottom */
html body .w-grid{grid-auto-rows:1fr;align-items:stretch}
html body .w-grid>.wcard{height:100%;display:flex;flex-direction:column}
.spg .sp-sv.wide{grid-column:1/-1;display:grid;grid-template-columns:48px 1fr;column-gap:18px;align-items:center;border-inline-start:0!important;padding-inline-start:0!important}
.spg .sp-sv.wide b{margin-top:0}.spg .sp-sv.wide p{max-width:680px}
/* ===== «خدمات العقار» /services (2026-10-30): the cards reuse the agencies directory; these are its own pieces ===== */
html body .svc-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0 6px}
html body .svc-cat{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--navy-2);color:#fff;font:inherit;cursor:pointer;text-align:start;transition:border-color .2s,background .2s}
html body .svc-cat b{font-size:14.5px;font-weight:700}html body .svc-cat span{font-size:12.5px;color:var(--muted);background:rgba(255,255,255,.06);border-radius:999px;padding:1px 8px}
html body .svc-cat:hover{border-color:rgba(202,144,81,.6)}html body .svc-cat.on{border-color:var(--gold);background:rgba(202,144,81,.14)}html body .svc-cat.on span{color:var(--navy);background:var(--gold)}
html body .svcdir .agcard{position:relative}
html body .svcdir .agcard.svc-feat{border-color:rgba(202,144,81,.7)!important}
html body .svc-ftag{position:absolute;top:12px;inset-inline-end:12px;font-size:11.5px;font-weight:700;color:var(--navy);background:var(--gold);border-radius:999px;padding:2px 10px}
html body .svc-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
html body .svc-photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
html body .svc-note{color:var(--muted);font-size:13px;margin-top:22px}
html body .svcjoin h1{font-size:28px;margin-bottom:6px}html body .svcjoin .svc-lead{color:var(--muted);margin-bottom:16px}
html body .svc-status{margin-bottom:14px;color:#D5DCE8}
html body .svc-pick{display:flex;flex-wrap:wrap;gap:8px}
html body .svc-pick button{border:1px solid var(--line);background:transparent;color:#D5DCE8;border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
html body .svc-pick button.on{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700}
@media (max-width:640px){html body .svc-cats{grid-template-columns:1fr 1fr}}
/* the WhatsApp button on directory cards (agencies and services) was a pale circle with a white icon: now WhatsApp green */
html body .agcard .agbtn.wa{background:#25D366!important;border-color:#25D366!important;color:#fff!important}
html body .agcard .agbtn.wa svg{color:#fff!important;stroke:#fff}
/* phones: the categories scroll sideways in one row, so the providers start near the top */
@media (max-width:640px){html body .svc-cats{display:flex;overflow-x:auto;gap:8px;margin-inline:-18px;padding:2px 18px 6px;scrollbar-width:none}html body .svc-cats::-webkit-scrollbar{display:none}html body .svc-cat{flex:none;padding:9px 12px}}
html body .svc-ftag{top:-11px!important;box-shadow:0 0 0 3px var(--navy)}
@media (max-width:640px){html body .svcdir .ag-filters .ag-pills{flex-wrap:nowrap;overflow-x:auto;margin-inline:-18px;padding:2px 18px 6px;scrollbar-width:none}html body .svcdir .ag-filters .ag-pills::-webkit-scrollbar{display:none}html body .svcdir .ag-filters .ag-pills button{flex:none}}
html body .svc-hacts{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
html body .svc-teamwa{display:inline-flex;align-items:center;gap:8px;color:#5BD68A;font-size:14px;font-weight:700;text-decoration:none}
html body .svc-teamwa svg,html body .svc-teamwa .mi{width:18px;height:18px}
html body .svc-help{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;color:#D5DCE8;font-size:14px}
@media (max-width:640px){html body .svc-hacts{align-items:stretch}html body .svc-teamwa{justify-content:center}}
/* «خدمات العقار» phase 2: ratings, reviews, the block on listing pages (2026-10-30) */
html body .svc-rate{display:flex;align-items:center;gap:6px;font-size:13px;color:#D5DCE8}html body .svc-rate .starsbig{color:var(--gold);font-size:14px}
html body .svc-revs{display:grid;gap:10px}html body .svc-rev{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--navy-2)}
html body .svc-rev .starsbig{color:var(--gold)}html body .svc-rev small{color:var(--muted);margin-inline-start:6px}html body .svc-rev p{margin-top:6px;color:#D5DCE8}
html body .svc-rform{display:grid;gap:10px;margin-top:14px;padding:14px;border:1px dashed rgba(202,144,81,.5);border-radius:10px}
html body .svc-rform textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;background:var(--navy);color:#fff;padding:10px;font:inherit}
html body .svc-rform .starpick span{font-size:28px;cursor:pointer;color:rgba(255,255,255,.25)}html body .svc-rform .starpick span.on{color:var(--gold)}
html body .svc-inlisting p{color:var(--muted);margin:-4px 0 12px}
html body .svc-inlisting .svc-pick a{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:#fff;text-decoration:none;font-size:14px}
html body .svc-inlisting .svc-pick a span{color:var(--gold);font-weight:700}html body .svc-inlisting .svc-pick a:hover{border-color:var(--gold)}
/* the provider's own logo and work photos on /services/join (2026-10-30) */
html body .svc-up{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
html body .svc-logo img,html body .svc-logo .aglogo{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block}
html body .svc-upbtn{cursor:pointer}
html body .svc-ph{position:relative}html body .svc-ph img{width:96px;height:72px;object-fit:cover;border-radius:8px;display:block;border:1px solid var(--line)}
html body .svc-ph button{position:absolute;top:-7px;inset-inline-end:-7px;width:22px;height:22px;border-radius:50%;border:0;background:#B3271E;color:#fff;cursor:pointer;line-height:1}
html body .svc-phadd{width:96px;height:72px;border:1px dashed rgba(202,144,81,.6);border-radius:8px;display:grid;place-items:center;align-content:center;gap:2px;color:var(--gold);font-size:22px;cursor:pointer;line-height:1}
html body .svc-phadd span{font-size:11.5px}
/* /app: the Android app file (until Google Play) */
html body .apppg-apk{margin-top:22px;padding:18px;border:1px solid rgba(202,144,81,.45);border-radius:12px;background:rgba(202,144,81,.06);display:grid;gap:8px;text-align:start}
html body .apppg-apk b{font-size:17px}html body .apppg-apk p{color:var(--muted);margin:0}
html body .apppg-apk a.gold{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
html body .apppg-apk small{color:var(--muted);text-align:center}html body .apppg-apk ol{margin:4px 0 0;padding-inline-start:20px;color:#D5DCE8;font-size:14px;display:grid;gap:4px}
/* owner 2026-10-30: the site's text is not selectable / copyable with a long press or a drag; form fields stay normal,
and the admin panel (body.adm-mode) keeps selection for the team's own work */
html body:not(.adm-mode){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html body:not(.adm-mode) input,html body:not(.adm-mode) textarea,html body:not(.adm-mode) select,html body:not(.adm-mode) [contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* the home hero's Price popup matches the hero's other lists (white, navy text, 8px); the dark rule above is for the search page's
bar, whose lists are dark (owner 2026-10-30: «why does this one open blue unlike the others») */
@media (min-width:901px){
html body .hero-outer.hu .pricepop{background:#fff!important;color:var(--navy)!important;border:1px solid rgba(17,33,63,.12)!important;border-radius:8px!important;box-shadow:0 18px 44px -10px rgba(0,0,0,.45)!important}
html body .hero-outer.hu .pricepop label{color:#5B6371!important}
html body .hero-outer.hu .pricepop input{background:#F4F5F8!important;color:var(--navy)!important;border:1px solid rgba(17,33,63,.15)!important}
html body .hero-outer.hu .pricepop input:focus{border-color:var(--gold)!important;outline:none}
html body .hero-outer.hu .pricepop .pp-clear{color:var(--navy)!important;border-color:rgba(17,33,63,.2)!important}
html body .hero-outer.hu .pricepop hr,html body .hero-outer.hu .pricepop .pp-acts{border-color:rgba(17,33,63,.1)!important}
}
/* the home bar's Price field reads like its neighbours: «السعر» small on top, «الكل» bold under it */
html body .hero-outer.hu .sf .pricetrig .ph[data-all]{display:flex;flex-direction:column;gap:4px;color:#6B7484;font-size:10px;font-weight:400;line-height:10px}
html body .hero-outer.hu .sf .pricetrig .ph[data-all]::after{content:attr(data-all);color:var(--navy);font-size:12px;font-weight:600;line-height:14px}
html body .hero-outer.hu .sf .pricetrig{justify-content:center}
html body .hero-outer.hu .pricepop .pp-cur{font-size:12px;color:#5B6371;margin-bottom:8px}html body .hero-outer.hu .pricepop .pp-cur b{color:var(--navy);font-weight:700}
/* home bar price popup, tidied (owner 2026-10-30): no number arrows, the two buttons the same height, «أي سعر» a quiet text button */
@media (min-width:901px){
html body .hero-outer.hu .pricepop{padding:16px!important;min-width:320px}
html body .hero-outer.hu .pricepop .pp-row{gap:12px}
html body .hero-outer.hu .pricepop input{height:44px!important;font-size:15px!important;padding:0 12px!important;-moz-appearance:textfield}
html body .hero-outer.hu .pricepop input::-webkit-outer-spin-button,html body .hero-outer.hu .pricepop input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html body .hero-outer.hu .pricepop input::placeholder{color:#9AA1AE}
html body .hero-outer.hu .pricepop .pp-foot{margin-top:14px;padding-top:12px;align-items:center}
html body .hero-outer.hu .pricepop .pp-clear{border:0!important;background:none!important;color:#5B6371!important;height:40px;padding:0 4px!important;font-size:14px!important;font-weight:600!important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(91,99,113,.35)}
html body .hero-outer.hu .pricepop .pp-clear:hover{color:var(--navy)!important}
html body .hero-outer.hu .pricepop .pp-done{height:40px;padding:0 26px!important;font-size:14.5px!important;font-weight:700!important}
}
/* home bar price popup, compact (owner 2026-10-30: «too low when I open it, thinner, a slider»): it opens ABOVE the field like the
bar's other lists, the boxes and the buttons share one row, and a two-handle slider sets the range in one drag */
html body .hero-outer.hu .pricepop .pp-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
html body .hero-outer.hu .pricepop .pp-cur{margin:0}
html body .hero-outer.hu .pricepop .pp-txt{font-size:14px;color:var(--navy);white-space:nowrap}
html body .pp-sl{position:relative;height:30px;margin:2px 4px 10px}
html body .pp-track{position:absolute;inset-inline:0;top:13px;height:4px;border-radius:2px;background:#E2E5EB}
html body .pp-fill{position:absolute;top:0;bottom:0;background:var(--gold);border-radius:2px}
html body .pp-r{position:absolute;inset-inline:0;top:0;width:100%;height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
html body .pp-r::-webkit-slider-runnable-track{height:30px;background:none}
html body .pp-r::-moz-range-track{height:30px;background:none}
html body .pp-r::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 2px 6px rgba(17,33,63,.25);margin-top:4px;cursor:grab}
html body .pp-r::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--gold);box-shadow:0 2px 6px rgba(17,33,63,.25);cursor:grab}
html body .pp-r:focus-visible::-webkit-slider-thumb{outline:2px solid var(--navy);outline-offset:2px}
@media (min-width:901px){
html body .hero-outer.hu .pricepop{top:auto!important;bottom:calc(100% + 8px)!important;width:460px!important;min-width:0;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:end}
html body .hero-outer.hu .pricepop[hidden]{display:none!important}
html body .hero-outer.hu .pricepop .pp-head,html body .hero-outer.hu .pricepop .pp-sl{grid-column:1/-1}
html body .hero-outer.hu .pricepop .pp-row label{font-size:11px;gap:3px}
html body .hero-outer.hu .pricepop input:is([type=number],.pp-num){height:40px!important}
html body .hero-outer.hu .pricepop .pp-foot{margin:0!important;padding:0!important;border:0!important;gap:10px}
}
/* the popup's box rules (height, padding, fill, border) were reaching the slider's two range inputs too */
html body .hero-outer.hu .pricepop input.pp-r,html body .pricepop input.pp-r{height:30px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;outline:none}
/* the same popup on a phone: the price box is half the bar's width (it is the row's second box), so the popup reaches across both
boxes (2 × width + the 6px gap + the two 1px borders) and opens above (below it ran off the screen); the field stays positioned so its arrow stays put; white like on the computer, 16px text so the phone does not zoom in on typing */
@media (max-width:900px){
html body .hero-outer.hu .pricepop{top:auto!important;bottom:calc(100% + 8px)!important;inset-inline-start:auto!important;inset-inline-end:-1px!important;width:calc(200% + 10px)!important;min-width:0!important;padding:14px!important;background:#fff!important;color:var(--navy)!important;border:1px solid rgba(17,33,63,.12)!important;border-radius:8px!important;box-shadow:0 18px 44px -10px rgba(0,0,0,.45)!important}
html body .hero-outer.hu .pricepop label{color:#5B6371!important;font-size:12px}
html body .hero-outer.hu .pricepop .pp-row{gap:10px}
html body .hero-outer.hu .pricepop input:is([type=number],.pp-num){height:44px!important;font-size:16px!important;padding:0 12px!important;background:#F4F5F8!important;color:var(--navy)!important;border:1px solid rgba(17,33,63,.15)!important;border-radius:8px!important;-moz-appearance:textfield}
html body .hero-outer.hu .pricepop input:is([type=number],.pp-num):focus{border-color:var(--gold)!important;outline:none}
html body .hero-outer.hu .pricepop input::-webkit-outer-spin-button,html body .hero-outer.hu .pricepop input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html body .hero-outer.hu .pricepop input::placeholder{color:#9AA1AE}
html body .hero-outer.hu .pricepop .pp-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px!important;padding-top:0!important;border:0!important}
html body .hero-outer.hu .pricepop .pp-clear{border:0!important;background:none!important;color:#5B6371!important;height:44px;padding:0 4px!important;font-size:14px!important;font-weight:600!important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(91,99,113,.35)}
html body .hero-outer.hu .pricepop .pp-done{height:44px;padding:0 30px!important;font-size:15px!important;font-weight:700!important;background:#CA9051!important;color:var(--navy)!important;border:0!important;border-radius:8px!important}
html body .hero-outer.hu .pricepop .pp-r::-webkit-slider-thumb{width:26px;height:26px;margin-top:2px}
}
/* an old rule turns the popup's inputs left-to-right (right for typed numbers); the slider follows the page instead, so in Arabic
the low end sits on the right under «من» and the gold fill (drawn with inline insets) lands between the two handles */
html body .pricepop input.pp-r{direction:inherit!important}
/* the price popup in the bar's own sizes (owner 2026-10-30: «the size of it, the font and the boxes to match the website»):
380 wide and 10px padding like the bar's other lists, 10px grey labels and 12–14px text like the bar's fields, white boxes
with a hairline like the bar, the gold button like «ابحث» (14/600), smaller slider handles */
html body .hero-outer.hu .pricepop .pp-cur{font-size:11px!important;font-weight:400!important;color:#6B7484!important}
html body .hero-outer.hu .pricepop .pp-cur b{font-weight:600!important;color:var(--navy)!important}
html body .hero-outer.hu .pricepop .pp-txt{font-size:13.5px!important;font-weight:700!important}
html body .hero-outer.hu .pricepop .pp-row label{font-size:10px!important;font-weight:400!important;color:#6B7484!important;letter-spacing:-.12px;gap:4px!important}
html body .hero-outer.hu .pricepop input:is([type=number],.pp-num){background:#fff!important;border:1px solid #E3E6EB!important;border-radius:8px!important;font-weight:600!important;color:var(--navy)!important;box-shadow:none!important}
html body .hero-outer.hu .pricepop input:is([type=number],.pp-num):focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(202,144,81,.15)!important}
html body .hero-outer.hu .pricepop .pp-clear{font-size:12px!important;font-weight:600!important}
html body .hero-outer.hu .pricepop .pp-done{font-size:14px!important;font-weight:600!important;background:#CA9051!important;color:var(--navy)!important;border:0!important;border-radius:8px!important}
@media (min-width:901px){
html body .hero-outer.hu .pricepop{width:380px!important;padding:12px!important;border:0!important;column-gap:10px!important}
html body .hero-outer.hu .pricepop .pp-head{margin-bottom:2px!important}
html body .hero-outer.hu .pricepop .pp-sl{height:26px;margin:0 2px 8px}
html body .hero-outer.hu .pricepop .pp-track{top:11px}
html body .hero-outer.hu .pricepop input.pp-r{height:26px!important}
html body .hero-outer.hu .pricepop .pp-r::-webkit-slider-runnable-track{height:26px}
html body .hero-outer.hu .pricepop .pp-r::-webkit-slider-thumb{width:18px;height:18px;border-width:2.5px;margin-top:4px}
html body .hero-outer.hu .pricepop .pp-r::-moz-range-thumb{width:13px;height:13px;border-width:2.5px}
html body .hero-outer.hu .pricepop .pp-row{gap:8px!important}
html body .hero-outer.hu .pricepop input:is([type=number],.pp-num){height:36px!important;font-size:13.5px!important;padding:0 10px!important}
html body .hero-outer.hu .pricepop .pp-foot{gap:8px!important}
html body .hero-outer.hu .pricepop .pp-clear{height:36px!important}
html body .hero-outer.hu .pricepop .pp-done{height:36px!important;padding:0 18px!important}
}
@media (max-width:900px){
html body .hero-outer.hu .pricepop{padding:12px!important;border:0!important}
html body .hero-outer.hu .pricepop .pp-row label{font-size:11px!important}
html body .hero-outer.hu .pricepop input:is([type=number],.pp-num){height:42px!important}
html body .hero-outer.hu .pricepop .pp-done,html body .hero-outer.hu .pricepop .pp-clear{height:40px!important}
}
/* the price field's little arrow turns up while its popup is open, like the bar's other lists */
html body .hero-outer.hu .sf-price .pricetrig .chev{transition:transform .2s}
html body .hero-outer.hu .sf-price:has(.pricepop:not([hidden])) .pricetrig .chev{transform:rotate(180deg)}
/* on phones the top of «السعر»'s first letter rose above the price button and its clipping cut it off; the button there is
150px wide, room enough for any chosen range */
@media (max-width:900px){ html body .hero-outer.hu .sf .pricetrig{overflow:visible!important} }
/* the price field's text sits in the middle of its box like the bar's other fields (owner 2026-10-30): the same space is kept
free for the little arrow (inline-end), and both «السعر / الكل» and a chosen range («$25k – $125k») are centred */
html body .hero-outer.hu .sf .pricetrig{align-items:center!important;justify-content:center!important;text-align:center!important;padding-inline-end:27px!important;padding-inline-start:1px!important}
html body .hero-outer.hu .sf .pricetrig .ph[data-all]{align-items:center!important;text-align:center}
/* the hero headline a bit thinner (owner 2026-10-30): the white words lose the extra 1.5px outline (1.1px on phones) that made
them heavier than the gold «من هنا.»; the face stays Reem Kufi 700 */
html body .hero-outer.hu .hero h1{-webkit-text-stroke:0!important}
/* the base rule draws the headline as an outline on a transparent fill; with the outline gone it needs a fill when Studio sets none */
html body .hero-outer.hu .hero h1:not([style*="color"]){color:#fff}
/* the site's press effect (buttons shrink a little on press) gave the price button a transform, which re-anchors its absolutely
placed arrow to the button for that moment: the arrow jumped ~13px and back (owner 2026-10-30). The bar's other fields are not
buttons and never shrink, so the price field doesn't either */
html body .hero-outer.hu .sf .pricetrig,html body .hero-outer.hu .sf .pricetrig:active,html body .hero-outer.hu .sf .pricetrig:hover,html body .hero-outer.hu .sf .pricetrig:focus{transform:none!important}
/* the home bar's Furnished field (rent) in the same size and place as the other fields (owner 2026-10-30): name 10px grey on top,
the choice 12px/600 navy under it, centred in the space between the arrow and the edge; the native select covers the box unseen */
html body .hero-outer.hu .sf.sf-furn{position:relative;display:flex;align-items:center}
html body .hero-outer.hu .sf.sf-furn .ph[data-all]{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:4px;margin-inline-end:27px;margin-inline-start:1px;color:#6B7484;font-size:10px;font-weight:400;line-height:10px;letter-spacing:-.12px;pointer-events:none;white-space:nowrap}
html body .hero-outer.hu .sf.sf-furn .ph[data-all]::after{content:attr(data-all);color:var(--navy);font-size:12px;font-weight:600;line-height:14px}
html body .hero-outer.hu .sf.sf-furn select{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer;margin:0!important;padding:0!important;border:0!important;font-size:16px}
html body .hero-outer.hu .sf.sf-furn:focus-within{outline:2px solid var(--gold);outline-offset:-2px}
html body .hero-outer.hu .sf.sf-furn{flex-direction:row!important;justify-content:center!important}
html body .hero-outer.hu .sf.sf-furn .chev{position:absolute!important;inset-inline-end:10px!important;inset-inline-start:auto!important;top:50%!important;margin:-7px 0 0!important;transform:none;pointer-events:none}
/* the neighbours' arrows sit right after the box's inline padding (12px from 1401px up, 10px below) */
@media (min-width:1401px){ html body .hero-outer.hu .sf.sf-furn .chev{inset-inline-end:12px!important} }
/* ===== listing gallery, fixed and improved in its own layout (owner 2026-10-30: «fix the current one and improve it») =====
the big photo beside a column of thumbnails stays; the photo is shown WHOLE (no crop) over a soft blur of itself, nothing grows
on hover, the arrows sit in the same place on photos and the video, every thumbnail (the video too) is the same size and a short
list fills the column, the count stays visible, the frame follows the screen height instead of a fixed 700px */
html body .lpage .lgal .lg-main{background:#0D1729!important;overflow:hidden}
html body .lpage .lgal .lg-main::before{content:"";position:absolute;inset:-30px;background:var(--bg) center/cover no-repeat;filter:blur(26px) brightness(.55) saturate(.95);opacity:1;z-index:0}
html body .lpage .lgal .lg-main img.main,html body .lpage .lgal .lg-main video.main{position:relative;z-index:1;object-fit:contain!important;transform:none!important;transition:none!important;background:transparent!important}
html body .lpage .lgal figure:hover img.main{transform:none!important}
html body .lpage .lgal .gnav{width:44px!important;height:44px!important;top:50%!important;margin-top:-22px!important;transform:none!important;background:#fff!important;color:var(--navy)!important;border:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;box-shadow:0 4px 14px rgba(0,0,0,.28)!important;z-index:3!important;padding:0!important;font-size:0!important}
html body .lpage .lgal .gnav svg{width:22px;height:22px;display:block}
html body .lpage .lgal .gnav:hover{background:#F4F5F8!important}
html body .lpage .lgal .gcount{z-index:3}
html body .lpage .lgal .lg-main .lg-enlarge{inset-inline-start:auto!important;inset-inline-end:12px!important;top:12px!important;z-index:4}
html body .lpage .lgal .lg-main .lg-vid{z-index:3}
html body .lightbox .lb-nav{display:grid;place-items:center;font-size:0}
html body .lightbox .lb-nav svg{width:24px;height:24px}
@media (min-width:861px){
html body .lpage .lgal:not(.n0){height:clamp(460px,70vh,680px)!important}
html body .lpage .lgal .lg-side{display:flex!important;flex-direction:column;gap:10px;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:0}
html body .lpage .lgal .lg-side::-webkit-scrollbar{display:none}
html body .lpage .lgal .lg-side>.gt,html body .lpage .lgal .lg-side>.gthv{flex:1 0 calc((100% - 40px) / 5)!important;width:100%!important;height:auto!important;min-height:90px;border-radius:10px!important;overflow:hidden;position:relative;cursor:pointer;transform:none!important;opacity:1!important;outline:0!important;background:#0D1729}
html body .lpage .lgal .lg-side>*:hover{transform:none!important}
html body .lpage .lgal .lg-side .gt img,html body .lpage .lgal .lg-side .gthv img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;opacity:.8;transition:opacity .2s;border-radius:0!important}
html body .lpage .lgal .lg-side>*:hover img,html body .lpage .lgal .lg-side>.sel img{opacity:1}
html body .lpage .lgal .lg-side>.sel::after{content:"";position:absolute;inset:0;border:3px solid var(--gold);border-radius:10px;z-index:2;pointer-events:none}
}
@media (min-width:861px) and (max-width:1180px){ html body .lpage .lgal:not(.n0):has(.lg-side){grid-template-columns:1fr 230px!important} }
/* the video thumbnail: its poster with a round play button in the middle */
html body .lpage .lgal .lg-side .gthv{display:block}
html body .lpage .lgal .lg-side .gthv .vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(17,33,63,.75);border:2px solid rgba(255,255,255,.85);color:#fff;font-size:14px;display:grid;place-items:center;padding-inline-start:2px}
@media (max-width:860px){
html body .lpage .lgal .gnav{width:38px!important;height:38px!important;margin-top:-19px!important}
html body .lpage .lgal .gnav svg{width:19px;height:19px}
html body .lpage .lgal .lg-side{display:flex!important;flex-direction:row;gap:6px;overflow-x:auto;padding:8px 0 2px;scrollbar-width:none;height:auto;background:transparent}
html body .lpage .lgal .lg-side::-webkit-scrollbar{display:none}
html body .lpage .lgal .lg-side>.gt,html body .lpage .lgal .lg-side>.gthv{flex:0 0 72px!important;width:72px!important;height:54px!important;aspect-ratio:auto!important;border-radius:6px!important;overflow:hidden;position:relative;opacity:1!important;outline:0!important}
html body .lpage .lgal .lg-side .gt img,html body .lpage .lgal .lg-side .gthv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
html body .lpage .lgal .lg-side>.sel img{opacity:1}
html body .lpage .lgal .lg-side>.sel::after{content:"";position:absolute;inset:0;border:2px solid var(--gold);border-radius:6px;z-index:2;pointer-events:none}
html body .lpage .lgal .lg-side .gthv .vplay{width:26px;height:26px;font-size:10px;border-width:1.5px}
}
/* the thumbnail strip must not widen the page on phones (20 thumbnails made the listing column 1400px wide) */
html body .lpage>.lgrid,html body .lpage .lgal,html body .lpage .lgal .lg-side{min-width:0!important;max-width:100%}
/* «كل الصور» sits in the big photo's top corner (it used to land on the first thumbnail, and under the video's enlarge button);
on a phone's video the count moves to the top so it clears the video's control bar */
@media (min-width:861px){
html body .lpage .lgal .lg-all{top:12px!important;bottom:auto!important;inset-inline-start:auto!important;inset-inline-end:calc(310px + 20px + 12px)!important;z-index:4}
html body .lpage .lgal .lg-main.onvid~.lg-all{inset-inline-end:calc(310px + 20px + 62px)!important}
}
@media (min-width:861px) and (max-width:1180px){
html body .lpage .lgal .lg-all{inset-inline-end:calc(230px + 20px + 12px)!important}
html body .lpage .lgal .lg-main.onvid~.lg-all{inset-inline-end:calc(230px + 20px + 62px)!important}
}
@media (max-width:860px){
html body .lpage .lgal .lg-all{top:12px!important;bottom:auto!important;inset-inline-start:auto!important;inset-inline-end:12px!important;z-index:4;white-space:nowrap}
html body .lpage .lgal .lg-main.onvid~.lg-all{inset-inline-end:60px!important}
html body .lpage .lgal .lg-main.onvid .gcount{top:12px!important;bottom:auto!important}
}
/* ===== a guide opened from its own address (/guides/…, scripts/static-shell.mjs, 2026-10-31): its generated text inside the
app's frame, in the site's dark theme (the old pages had their own cream design) ===== */
html body .stpage{max-width:860px;margin:0 auto;padding-top:28px;padding-bottom:70px;color:#E6EAF2;font-size:16px;line-height:1.9}
html body .stpage main.wrap{max-width:none;padding:0;margin:0}
html body .stpage .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);margin-bottom:18px}
html body .stpage .crumbs a{color:var(--muted);text-decoration:none}html body .stpage .crumbs a:hover{color:#fff}
html body .stpage h1{font-family:"Reem Kufi",var(--f);font-weight:700;font-size:34px;line-height:1.35;color:#fff;margin:0 0 12px}
html body .stpage h2{color:var(--gold);font-size:22px;line-height:1.5;font-weight:600;margin:34px 0 10px}
html body .stpage p{margin:0 0 14px}
html body .stpage .lede{font-size:18px;color:#fff}
html body .stpage .meta,html body .stpage .disc{font-size:13.5px;color:var(--muted)}
html body .stpage a{color:var(--gold)}
html body .stpage ul,html body .stpage ol{padding-inline-start:22px;margin:0 0 14px}
html body .stpage li{margin-bottom:6px}
html body .stpage .k{background:var(--navy);border-radius:12px;padding:16px 20px;margin:18px 0;border-inline-start:3px solid var(--gold)}
html body .stpage .faq details{background:var(--navy);border-radius:10px;padding:12px 16px;margin-bottom:10px}
html body .stpage .faq summary{cursor:pointer;font-weight:600;color:#fff}
html body .stpage .cta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
html body .stpage .cta a,html body .stpage a.gold{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:8px;background:var(--gold);color:var(--navy);font-weight:700;text-decoration:none}
html body .stpage .morelist{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
html body .stpage .chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:20px;border:1px solid var(--line);color:#fff;text-decoration:none;font-size:14px}
html body .stpage .chip:hover{border-color:var(--gold)}
@media (max-width:640px){ html body .stpage{padding-top:16px;font-size:15.5px} html body .stpage h1{font-size:26px} html body .stpage h2{font-size:19px} }
html body .stpage .chip{white-space:normal;max-width:100%;line-height:1.5;padding-block:7px}
html body .stpage,html body .stpage *{overflow-wrap:anywhere}
/* Lighthouse run (2026-10-31): the green badge («مكتب عقاري ✓») had white text at 3.2:1 — a darker green reaches 5.3:1;
the results «loading» box keeps the room the cards will take, so the footer does not jump (layout shift) */
html body .vbadge:not(.soft){background:#1E7A4F!important;color:#fff!important}
html body .resempty.rs-loading{min-height:80vh;align-content:start}
/* 2026-10-31 (owner, iPhone): the install-steps window is white, but its step text took the theme's white --ink, so only the
gold 1 2 3 showed. Inside the white windows the steps are navy; on the dark /app page they stay white */
.soon-c .pwa-steps li{color:var(--navy)}
/* 2026-10-31 (owner): typing in the home search's province / area fields showed nothing (the typing box wrote white on the
white field) and the box covered the field with a big, clipped «المحافظة». Now the field keeps its small label and its
value line: on opening, the value turns grey (as a hint) and what you type takes its place, same size, in navy */
.hero-outer.hu .sf .cs-compact .chipsel-input{padding:14px 0 0;padding-inline-end:26px;font:600 12px/14px var(--f);color:var(--navy);-webkit-text-fill-color:var(--navy);caret-color:var(--gold-dk)}
.hero-outer.hu .sf .cs-compact .chipsel-input::placeholder{color:transparent;-webkit-text-fill-color:transparent}
.hero-outer.hu .sf .cs-compact:has(.chipsel-drop.on) .cs-sum{opacity:1}
.hero-outer.hu .sf .cs-compact:has(.chipsel-drop.on) .cs-sum,.hero-outer.hu .sf .cs-compact:has(.chipsel-drop.on) .cs-sum::after{color:#9CA3AF!important}
.hero-outer.hu .sf .cs-compact:has(.chipsel-input:not(:placeholder-shown)) .cs-sum,.hero-outer.hu .sf .cs-compact:has(.chipsel-input:not(:placeholder-shown)) .cs-sum::after{color:transparent!important}
.hero-outer.hu .sf .cs-compact:has(.chipsel-input:not(:placeholder-shown)) .cs-sum *{visibility:hidden}
@media (max-width:860px){ .hero-outer.hu .sf .cs-compact .chipsel-input{padding-top:12px} }
.hero-outer.hu .sf .cs-compact .chipsel-input{text-align:center}
/* two or more chosen: «حمص +2» on one line (the «+2» used to drop to a third line, out of the field) */
.hero-outer.hu .sf .cs-sum{display:block!important;text-align:center}
.hero-outer.hu .sf .cs-sum::before{margin-bottom:4px!important}
@media (max-width:860px){ .hero-outer.hu .sf .cs-sum::before{margin-bottom:2px!important} }
/* 861–900px wide: an old phone rule put «ابحث» on a row of its own, squeezing the fields to a sliver (text cut) */
@media (min-width:861px) and (max-width:900px){ .hero-outer.hu .srow .sgo{grid-column:auto} }
/* the empty fields' «الكل» in the page language (the English page showed Arabic; the price field already said «Any») */
html[lang=en] .hero-outer.hu .sf .cs-sum:empty::after,html[lang=en] .hero-outer.hu .sf .cs-sum[data-names="[]"]::after{content:"Any"}
html[lang=de] .hero-outer.hu .sf .cs-sum:empty::after,html[lang=de] .hero-outer.hu .sf .cs-sum[data-names="[]"]::after{content:"Alle"}
html[lang=fr] .hero-outer.hu .sf .cs-sum:empty::after,html[lang=fr] .hero-outer.hu .sf .cs-sum[data-names="[]"]::after{content:"Tous"}
/* 2026-10-31 (owner): the chosen items at the top of the list had a navy «×» on the navy bar (invisible), so they looked
impossible to remove. The «×» is white on a light disc, 22px, and turns gold on hover */
html body .chipsel-drop .cs-selected .chip{display:inline-flex;align-items:center;gap:6px}
html body .chipsel-drop .cs-selected .chip-x{display:inline-grid;place-items:center;width:22px;height:22px;margin:0;margin-inline-start:2px;border-radius:50%;background:rgba(255,255,255,.18)!important;color:#fff!important;font-size:15px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
html body .chipsel-drop .cs-selected .chip-x:hover,html body .chipsel-drop .cs-selected .chip-x:focus-visible{background:var(--gold)!important;color:var(--navy)!important}
/* 2026-11-01 (owner, Galaxy Z Flip5): on phones the map page had no side margin — its heading touched the screen's edge.
Same 20px as the results page */
@media (max-width:900px){ html body .rs-mappage .rs-mapwrap{padding-inline:20px!important} }
/* map page clusters (2026-11-01): a gold circle with the number of listings under it; bigger for 10+ and 100+ */
.mclu-w{background:none!important;border:0!important}
.mclu{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--navy);font:700 13px/1 var(--f);box-shadow:0 0 0 5px rgba(202,144,81,.35),0 4px 12px rgba(0,0,0,.35);cursor:pointer;transition:transform .15s}
.mclu.m{width:42px;height:42px;font-size:14px}
.mclu.l{width:50px;height:50px;font-size:15px}
.mclu:hover{transform:translate(-50%,-50%) scale(1.08)}
/* the phone's status bar inside the app and the home-screen web app (owner 2026-11-03): the page draws under it, so a solid
navy strip of the bar's height sits behind the clock and battery, and scrolled text no longer runs under them
(0 high in a browser tab, where the phone keeps its own bar) */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px));background:#14213D;z-index:2147483000;pointer-events:none}
/* report / block a member (2026-11-03): under a member's profile, in the agency contact row, and the account page's list */
.profblk{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.profblk .gh,.agcontact [data-blk],.agcontact [data-rptuser]{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0}
.profblk .danger,.agcontact .danger{color:#E5484D}
.blklist{display:grid;gap:4px;margin:8px 0 14px}
.blkrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.blkrow b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* four actions on a listing (save, share, report, block the advertiser): one row of four on a wide screen, two rows of two on a phone, never three and one */
.lacts:has(> :nth-child(4)){grid-template-columns:repeat(4,170px)}
@media (max-width:860px){ html body .lacts:has(> :nth-child(4)){grid-template-columns:repeat(2,1fr)!important} }
/* balkoun.com/delete-account (2026-11-04) */
.delacct h1{font-size:28px;margin:6px 0 8px;color:#fff}
.delacct .lead{color:var(--grey-l,#C9CFDB);font-size:15.5px;line-height:1.8;margin:0 0 18px}
.delacct h2{font-size:18px;color:var(--gold,#C4881F);margin:26px 0 8px}
.delacct ol,.delacct ul{margin:0 0 12px;padding-inline-start:22px;display:grid;gap:6px;color:#E6E8EE;line-height:1.75}
.delacct p{color:#E6E8EE;line-height:1.8}
.delacct a{color:var(--gold,#C4881F)}
html body .delacct .da-go{display:inline-flex;align-items:center;height:46px;padding:0 22px;margin:6px 0 4px;border:0;border-radius:10px;background:var(--gold,#C4881F);color:#14213D;font:inherit;font-weight:700;cursor:pointer}