:root{--r:8px;--r-s:4px;--r-l:12px;--fd:'Noto Kufi Arabic','Lato',system-ui,sans-serif;--sec-pad-d:34px;--navy:#14213D;--navy-2:#0D1729;--navy-w:#EEF1F7;--gold:#C4881F;--gold-w:#FDF5E7; --ink:#22252A;--grey:#5B6371;--light:#6E7583;--line:#E4E4E7;--line-2:#D3D4D8; --page:#F4F2ED;--card:#FFF;--ok:#2E7D5B;--ok-w:#EAF5EF;--warn:#B45309;--danger:#B3271E; --f:'Noto Kufi Arabic','Lato',system-ui,sans-serif;--r:8px;--r-s:4px; --sh:0 1px 2px rgba(20,33,61,.06);--sh2:0 2px 8px rgba(20,33,61,.10)} *{box-sizing:border-box;margin:0;padding:0} body{background:var(--page);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} a[data-go],a[data-open]{cursor:pointer} button,input,select{font:inherit;color:inherit} img{display:block;max-width:100%} .wrap{max-width:1200px;margin:0 auto;padding-inline:18px} .ltr{direction:ltr;display:inline-block;font-variant-numeric:tabular-nums} td.ltr,th.ltr{display:table-cell}dd.ltr{display:block} :focus-visible{outline:2px solid var(--navy);outline-offset:2px} header{background:var(--navy);color:#fff} /* 2026-09: on the home page the header floats transparent over the hero (the way Bayut does it) and becomes a fixed, solid bar once the page scrolls; the hero gets top padding equal to the header height so the ad banner and headline are never hidden underneath it */ .home-hero header{position:absolute;top:0;left:0;right:0;z-index:60;background:transparent;transition:background .35s ease,box-shadow .35s ease} .home-hero header.hdr-solid{position:fixed;background:rgba(20,33,61,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 24px -14px rgba(9,14,26,.6)} .home-hero .hero-outer{padding-top:62px} .home-hero .hscrim{background:linear-gradient(to bottom,rgba(13,23,41,.62),rgba(13,23,41,.30) 120px,rgba(13,23,41,.14) 34%,rgba(13,23,41,.30) 72%,rgba(13,23,41,.58))} @media(max-width:700px){.home-hero .hero-outer{padding-top:60px}} @media(max-width:640px){.home-hero .hero-outer{padding-top:58px}} .hbar{display:flex;align-items:center;gap:22px;height:62px} @media(min-width:861px){.hbar{direction:ltr}}.hbar .hpill{order:0}.hbar .hnav{order:1}.hbar .htools{order:2}.hbar .logo{order:3;margin-left:6px} [dir=rtl] .hbar .menu,[dir=rtl] .hbar .chip2,[dir=rtl] .hbar .notifmenu,[dir=rtl] .hbar #langChip{direction:rtl} /* the lockup keeps one shape everywhere: mark on the right, Latin line right-aligned under the Arabic name */ .blogo{direction:ltr;flex-direction:row-reverse}.blogo-w{align-items:flex-end} .logo{padding:5px 13px;border:1px dashed rgba(255,255,255,.35);border-radius:var(--r-s);font-weight:700;font-size:19px;color:var(--gold)} .hnav{display:flex;gap:20px;font-size:14.5px;color:rgba(255,255,255,.86)} .hnav a{cursor:pointer} .hnav a:hover,.hnav a.on{color:var(--gold)} .navmore{position:relative;cursor:pointer} .navmore .menu{inset-inline-start:0;inset-inline-end:auto;top:calc(100% + 14px)} /* the language switcher reuses .navmore for its base positioning/ cursor behavior, but it does NOT sit in the same part of the header as the "More" dropdown that inset-inline-start:0 above was written for — it lives in .htools, the group pinned to the opposite (outer) edge of the header. Inheriting that same rule pushed the language dropdown toward the outer edge too — in RTL, that's the LEFT edge, where .htools itself already sits, so the panel had nowhere left to go but off the edge of the screen, making every option unreachable. This puts it back in line with every other .htools dropdown (account, notifications), which open inward toward the center of the page instead. */ #langMenu{inset-inline-start:auto;inset-inline-end:0} .htools{margin-inline-start:auto;display:flex;gap:9px;align-items:center} .mini{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;padding:6px 12px;font-size:12.5px;border-radius:var(--r-s);cursor:pointer} #lang option{color:var(--ink);background:#fff} .mini:hover{border-color:var(--gold);color:var(--gold)} .gold{background:var(--gold);color:#1A1206;border:none;padding:8px 16px;font-size:13.5px;font-weight:600;border-radius:var(--r-s);cursor:pointer} .gold:hover{background:#D6952A} .mobfab{display:none} @media(max-width:860px){.hnav{display:none}} .crumb{background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:var(--grey);padding:9px 0} .crumb a:hover{color:var(--navy);text-decoration:underline}.crumb span{margin-inline:6px;color:var(--line-2)} .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)} .pad{padding:15px 17px} .panel h2{font-size:17px;font-weight:700;padding:14px 22px;border-bottom:1px solid var(--line)} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:block} .card:hover{box-shadow:var(--sh2);border-color:var(--line-2)} .card .ph{position:relative} .card .ph img{width:100%;aspect-ratio:4/3;object-fit:cover} .bd{position:absolute;top:9px;inset-inline-start:9px;display:flex;gap:5px} .bd span{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-s);background:rgba(255,255,255,.95)} .bd .ok{color:var(--ok)}.bd .gd{color:var(--gold)} .tag.ok{color:var(--ok)} .tabu-green{color:var(--ok)} .nph{position:absolute;bottom:8px;inset-inline-end:8px;background:rgba(13,23,41,.8);color:#fff;font-size:11.5px;padding:2px 8px;border-radius:var(--r-s)} /* bed/bath/living counts as icon+number only, no text label, sitting directly on the photo's own bottom edge — this is what actually keeps the card compact, since wrapping text labels onto their own lines below the photo was what made cards taller than intended */ .cb-photoicons{position:absolute;bottom:0;inset-inline-start:0;inset-inline-end:0; display:flex;gap:10px;padding:16px 10px 6px; background:linear-gradient(to top, rgba(9,14,26,.72), rgba(9,14,26,0)); color:#fff;font-size:12px;font-weight:600} .cb-photoicons span{display:flex;align-items:center;gap:3px} .cb{padding:9px 12px 11px} .cb .p{font-size:19px;font-weight:700;color:var(--navy)} .cb-toprow{display:flex;align-items:baseline} .cb-toprow .p{white-space:nowrap} .cb-loc{font-size:12.5px;font-weight:700;color:#111;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;text-align:start;margin-top:2px} .cb-details{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-size:11.5px;color:var(--grey); margin-top:6px;overflow:visible;row-gap:4px} .cb-details span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cb-type{font-weight:600;color:var(--ink)} .cb-deed{margin-inline-start:2px;padding-inline-start:10px;border-inline-start:1px solid var(--line)} .cb-poster{color:var(--gold-dk,#8A6522)} .cb .d{font-size:11.5px;color:var(--light);margin-top:6px} /* reveal — scoped to html.js so nothing can ever stay hidden if JS fails */ *:focus-visible{outline:2px solid var(--gold)!important;outline-offset:2px} .adm *:focus-visible{outline-color:var(--navy)!important} html.js .rv{opacity:.35;transform:translateY(10px); transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)} html.js .rv.in{opacity:1;transform:none} .hbar .logo,.hbar .hnav a{opacity:0;animation:drop .5s cubic-bezier(.22,.61,.36,1) forwards} @keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .card{transition:box-shadow .22s ease,transform .22s ease,border-color .22s} .card:hover{transform:translateY(-3px)} .card-featured{filter:brightness(calc(1 + var(--feat-bright, 20) / 100)); border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 6px 18px -6px rgba(197,155,64,.45)} .card-featbadge{background:var(--gold)!important;color:#3a2c05!important} .card-newbadge{background:var(--ok)!important;color:#fff!important} .card .ph img{transition:transform .45s cubic-bezier(.22,.61,.36,1)} .card:hover .ph img{transform:scale(1.05)} .govs a,.pg a,.chip{transition:.18s ease} .govs a:hover{transform:translateY(-2px);border-color:var(--gold)} @media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none} .hbar .logo,.hbar .hnav a{opacity:1;animation:none} .card:hover{transform:none}.card:hover .ph img{transform:none}} .topbanner-wrap{padding-top:8px;position:relative;z-index:2} .topbanner-row{position:relative;height:var(--row-h,auto)} .topbanner-col{position:absolute;top:var(--banner-voff,0px);left:calc((100% - min(var(--banner-w,728px),100%)) * var(--banner-hpos,.5));max-width:100%} @media(max-width:700px){ .topbanner-row{height:var(--row-h-m,var(--row-h,auto))} .topbanner-col{top:var(--banner-voff-m,var(--banner-voff,0px));left:calc((100% - min(var(--banner-w-m,var(--banner-w,728px)),100%)) * var(--banner-hpos-m,var(--banner-hpos,.5)))} .topbanner{width:var(--banner-w-m,var(--banner-w,728px));aspect-ratio:var(--banner-ratio-m,var(--banner-ratio,728/90))} } .topbanner{display:block;width:var(--banner-w,728px);max-width:100%; margin-bottom:var(--banner-gap,14px);aspect-ratio:var(--banner-ratio,728/90); border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 2px 10px -4px rgba(9,14,26,.2);position:relative} .topbanner-media{width:100%;height:100%;position:relative;overflow:hidden} .topbanner-item{position:absolute;inset:0;opacity:0;visibility:hidden;display:block} .topbanner-item.on{opacity:1;visibility:visible;z-index:1} .topbanner-item img,.topbanner-item video{width:100%;height:100%;object-fit:contain;display:block} /* fade — a simple cross-fade between the outgoing and incoming ad */ .topbanner-item.leaving-fade{animation:tbFadeOut .6s ease forwards;z-index:2} .topbanner-item.entering-fade{animation:tbFadeIn .6s ease forwards;z-index:2} @keyframes tbFadeOut{from{opacity:1}to{opacity:0}} @keyframes tbFadeIn{from{opacity:0}to{opacity:1}} /* slide-left — the new ad slides in from the right, pushing the old one out to the left */ .topbanner-item.leaving-slide-left{animation:tbSlideOutLeft .6s ease forwards;z-index:1} .topbanner-item.entering-slide-left{animation:tbSlideInFromRight .6s ease forwards;z-index:2} @keyframes tbSlideOutLeft{from{transform:translateX(0)}to{transform:translateX(-100%)}} @keyframes tbSlideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}} /* slide-right — the reverse: new ad enters from the left, old one exits right */ .topbanner-item.leaving-slide-right{animation:tbSlideOutRight .6s ease forwards;z-index:1} .topbanner-item.entering-slide-right{animation:tbSlideInFromLeft .6s ease forwards;z-index:2} @keyframes tbSlideOutRight{from{transform:translateX(0)}to{transform:translateX(100%)}} @keyframes tbSlideInFromLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}} /* slide-up — new ad rises in from the bottom, old one exits upward */ .topbanner-item.leaving-slide-up{animation:tbSlideOutUp .6s ease forwards;z-index:1} .topbanner-item.entering-slide-up{animation:tbSlideInFromBottom .6s ease forwards;z-index:2} @keyframes tbSlideOutUp{from{transform:translateY(0)}to{transform:translateY(-100%)}} @keyframes tbSlideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}} /* slide-down — new ad drops in from the top, old one exits downward */ .topbanner-item.leaving-slide-down{animation:tbSlideOutDown .6s ease forwards;z-index:1} .topbanner-item.entering-slide-down{animation:tbSlideInFromTop .6s ease forwards;z-index:2} @keyframes tbSlideOutDown{from{transform:translateY(0)}to{transform:translateY(100%)}} @keyframes tbSlideInFromTop{from{transform:translateY(-100%)}to{transform:translateY(0)}} .topbanner-text{position:absolute;left:0;right:0;bottom:0;padding:6px 10px; background:linear-gradient(to top, rgba(9,14,26,.55), rgba(9,14,26,0)); color:#fff;font-size:13px;font-weight:600;text-align:center;z-index:3} @media (max-width:820px){ .topbanner{max-width:100%} } .hero-outer{position:relative;background:var(--navy);margin-bottom:var(--hero-gap,0px)} .hero{min-height:368px;display:flex;align-items:center;padding:32px 0 22px} .hero.hero-banner-above{padding-top:0} .hero .wrap{position:relative;z-index:3;width:100%} .hv{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .9s ease} .hv.on{opacity:1} .hv video,.hv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(13,23,41,.42),rgba(13,23,41,.14) 34%,rgba(13,23,41,.30) 72%,rgba(13,23,41,.58))} .hero h1{color:#fff;font-size:clamp(24px,3.5vw,37px);font-weight:700;line-height:1.5;text-shadow:0 2px 14px rgba(9,14,26,.65);margin-bottom:16px} .hero h1 span{color:var(--gold)} .sbar{background:#fff;border-radius:10px;box-shadow:0 14px 40px -12px rgba(9,14,26,.45)} .stabs{display:flex;border-bottom:1px solid var(--line);background:var(--page);border-radius:10px 10px 0 0;overflow:hidden} .stabs button{background:none;border:none;padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--grey);cursor:pointer;border-bottom:3px solid transparent;flex:1;white-space:nowrap} .stabs button.on{color:var(--navy);background:#fff;border-bottom-color:var(--gold)} .stabs-map{display:flex!important;align-items:center;justify-content:center;gap:4px;color:var(--navy)!important} .stabs-map:hover{background:#fff!important} .srow{display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr auto} .mapsearch-tabs.stabs{border-radius:10px;border-bottom:none;display:inline-flex} .mappin-preview{width:250px} .mappin-preview img{width:100%;height:150px;object-fit:cover;display:block} .mappin-nophoto{width:100%;height:150px;background:#14213D;display:flex;align-items:center;justify-content:center;color:var(--light);font-size:12px} .mappin-body{padding:9px 11px} .mappin-price{display:block;font-size:15.5px;color:var(--navy)} .mappin-loc{display:flex;align-items:center;margin-top:3px;font-size:12px;color:var(--grey)} .mappin-meta{display:flex;gap:10px;margin-top:6px;font-size:13px;color:var(--grey)} .mappin-type{margin-top:4px;font-size:12.5px;color:var(--light)} .leaflet-popup-content-wrapper{padding:0;overflow:hidden;border-radius:8px} .leaflet-popup-content{margin:0;width:auto!important} .mappin-popup-custom{position:absolute;z-index:1000;background:#fff;border-radius:8px; box-shadow:0 6px 20px rgba(9,14,26,.22);overflow:hidden;cursor:pointer} .mappin-popup-custom::after{content:"";position:absolute;inset-inline-start:50%;margin-inline-start:-7px; bottom:-7px;border:7px solid transparent;border-top-color:#fff} .mappin-popup-custom.flip-below::after{bottom:auto;top:-7px;border-top-color:transparent;border-bottom-color:#fff} .sf{padding:12px 16px;border-inline-end:1px solid var(--line);min-width:0} .sf label{display:block;font-size:11px;color:var(--light);font-weight:600;margin-bottom:2px} .sf select{border:none;background:none;width:100%;font-size:15px;font-weight:600;color:var(--ink);padding:0} .sf select:focus{outline:none} .sf .chipsel-box{border:none;padding:0;min-height:auto;background:none} .sf .chip{font-size:11.5px;padding:3px 5px 3px 8px} .sf .chipsel-input{font-size:15px;font-weight:600;padding:1px 0} .sf .chipsel-drop{inset-inline-start:-16px;min-width:260px} .sgo{background:var(--gold);color:#1A1206;border:none;padding:0 30px;font-weight:700;font-size:15px;cursor:pointer;display:grid;place-items:center;text-align:center;line-height:1.4;border-radius:0 0 10px 10px} .sgo:hover{background:#D6952A} @media(max-width:900px){.srow{grid-template-columns:1fr 1fr}.sf:nth-child(even){border-inline-end:none}.sf{border-bottom:1px solid var(--line)}.sgo{grid-column:1/-1;padding:15px}} .hnote{color:rgba(255,255,255,.9);font-size:13.5px;margin-top:13px;text-shadow:0 1px 8px rgba(9,14,26,.7)} .qfteaser-wrap{position:relative;margin:26px 0 0} .qfteaser{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--gold);border-radius:14px;padding-block:16px;padding-inline-start:20px;padding-inline-end:44px;box-shadow:0 2px 12px rgba(196,136,31,.1);cursor:pointer;text-decoration:none;color:inherit} .qfteaser-ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--gold-w);color:var(--gold);display:grid;place-items:center} .qfteaser-tx{flex:1;min-width:0} .qfteaser-tx b{display:block;font-size:15px;color:var(--navy)} .qfteaser-tx small{display:block;font-size:13px;color:var(--grey);margin-top:2px;line-height:1.5} .qfteaser-cta{flex:none;font-size:13.5px;font-weight:700;color:var(--gold);white-space:nowrap} .qfteaser-x{position:absolute;top:10px;inset-inline-end:10px;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--light);cursor:pointer;display:grid;place-items:center;font-size:16px;line-height:1;padding:0} .qfteaser-x:hover{background:var(--page)} .qf-badge{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;background:var(--gold);color:#1A1206;border-radius:999px;padding:1px 6px;margin-inline-start:6px;vertical-align:middle} @media(max-width:640px){.qfteaser{gap:12px;padding-inline-start:14px;padding-inline-end:38px}.qfteaser-tx b{font-size:14px}.qfteaser-tx small{font-size:12px}.qfteaser-cta{display:none}} .aisearch{margin-top:36px} .aisearch-pill{position:relative;display:flex;align-items:center;height:var(--sbar-h,40px);background:#fff;border-radius:14px;box-shadow:0 14px 30px -14px rgba(9,14,26,.4);padding-inline-end:4px;max-width:var(--sbar-w,1220px);margin:0 auto} .aisearch-badge{position:absolute;inset-inline-start:4px;top:3px;bottom:3px;display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,#E8F8F1,#EEF0FF);border-radius:10px;padding:0 12px;font:800 12.5px var(--f);color:var(--navy);white-space:nowrap;pointer-events:none} .aisearch-badge svg{width:13px;height:13px;flex:none;color:#2FB6A3} .aisearch-pill input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0;font:500 13.5px var(--f);color:var(--navy);padding-inline-start:106px;padding-inline-end:10px;text-align:end} .aisearch-pill input::placeholder{color:var(--grey)} .aisearch-go{flex:none;width:34px;height:calc(100% - 6px);border-radius:10px;border:0;background:var(--gold);color:#1A1206;display:grid;place-items:center;cursor:pointer} .aisearch-go svg{width:14px;height:14px} .aisearch-go:disabled{opacity:.6;cursor:default} @media(max-width:640px){.aisearch-pill{height:var(--sbar-h-m,var(--sbar-h,48px));max-width:var(--sbar-w-m,var(--sbar-w,100%))}.aisearch-badge{padding:0 10px;font-size:11.5px}.aisearch-pill input{padding-inline-start:90px;font-size:13px}} .aisearch-result{margin-top:9px;text-align:center;font-size:13px;line-height:1.5;color:var(--grey)} .aisearch-result.warn{color:var(--warn)}.aisearch-result.ok{color:var(--ink);font-size:14px;background:var(--gold-w);border:1px solid var(--gold);border-radius:10px;padding:8px 12px;text-shadow:none} .aisearch-result.danger{color:var(--danger)} .ai-understood{display:flex;align-items:center;gap:10px;background:var(--gold-w);border:1px solid var(--gold);border-radius:12px;padding:10px 14px;margin-top:18px;color:var(--navy);font-size:13.5px} .ai-understood svg{flex:none;width:18px;height:18px;color:var(--gold)} .ai-understood span{flex:1;line-height:1.5} .ai-understood-x{flex:none;border:0;background:transparent;color:var(--grey);cursor:pointer;font-size:16px;line-height:1;width:22px;height:22px;border-radius:50%} .ai-understood-x:hover{background:#fff} .hnote b{color:var(--gold)} .sec{padding:34px 0 6px} .sec h2{font-size:21px;font-weight:700;margin-bottom:4px} .sec .sub{color:var(--grey);font-size:14px;margin-bottom:16px} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:16px} .tile{display:block;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:.22s;cursor:pointer} .tile:hover{box-shadow:var(--sh2);transform:translateY(-3px)} .tile .im{aspect-ratio:16/10;overflow:hidden} .tile .im img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .tile:hover .im img{transform:scale(1.06)} .tile .tx{padding:13px 15px 15px} .tile h3{font-size:16.5px;font-weight:700;margin-bottom:3px} .tile p{font-size:13.5px;color:var(--grey);line-height:1.7} .tile .cnt{font-size:12.5px;color:var(--gold);font-weight:600;margin-top:6px} .band{background:var(--navy);border-radius:12px;padding:30px 34px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;margin:34px 0 6px;color:#fff} @media(max-width:760px){.band{grid-template-columns:1fr;text-align:center}} .band h2{font-size:22px;font-weight:700;margin-bottom:7px;color:#fff} .band p{color:rgba(255,255,255,.76);font-size:14.5px;max-width:56ch} .bandlist{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.86)} .bandlist span::before{content:"✓";color:var(--gold);font-weight:700;margin-inline-end:7px} .govs{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:9px;margin-top:14px} .govs a{background:#fff;border:1px solid var(--line);border-radius:7px;padding:11px 14px;font-size:14px;display:flex;justify-content:space-between;align-items:center;transition:.16s;cursor:pointer} .govs a:hover{border-color:var(--gold);transform:translateY(-2px)} .govs span{color:var(--light);font-size:12.5px} .guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px} .guide{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;transition:.2s;display:block;color:inherit;text-decoration:none;cursor:pointer} .guide:hover{box-shadow:var(--sh2)} .guide .k{font-size:11.5px;font-weight:700;color:#8A6522;margin-bottom:7px} .guide h3{font-size:16px;font-weight:700;margin-bottom:5px;line-height:1.6} .guide p{font-size:13.5px;color:var(--grey);line-height:1.8} /* search view */ .lay{display:grid;grid-template-columns:250px 1fr;gap:20px;padding:16px 0 30px;align-items:start} @media(max-width:940px){.lay{grid-template-columns:1fr}} .side2{position:sticky;top:14px} @media(max-width:940px){.side2{position:static}} .filtertoggle{display:none} @media(max-width:940px){ .filtertoggle{display:flex;align-items:center;justify-content:space-between;width:100%; padding:14px 16px;background:none;border:none;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer} .filtercount{background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;border-radius:10px; padding:1px 8px;margin-inline-start:8px;margin-inline-end:auto} .filtertogglearrow{color:var(--grey);font-size:14px} .side2 .filterbody{display:none} .side2.mfopen .filterbody{display:block} } .fg{padding:14px 16px;border-bottom:1px solid var(--line)} .chipsel{position:relative} .chipsel-box{display:flex;align-items:center;height:36px; border:1px solid var(--line-2);border-radius:7px;padding:0 10px;background:#fff;cursor:text} .chipsel-box:focus-within{border-color:var(--navy)} .chipsel-input{border:none;outline:none;font-family:inherit;font-size:13px;width:100%;height:100%;padding:0;background:transparent;appearance:none;-webkit-appearance:none} .chipsel-input::-webkit-search-cancel-button,.chipsel-input::-webkit-search-decoration{-webkit-appearance:none;display:none} /* browsers never inherit a page's text color into a field's placeholder — without an explicit rule they fall back to their own generic, washed-out gray, which is why filter labels (styled with the site's own text color) looked noticeably darker/clearer than the "Search a governorate..." text sitting right inside the box underneath them. Site-wide so every field is consistent. */ ::placeholder{color:var(--grey);opacity:1} .chipsel-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .chip{display:inline-flex;align-items:center;gap:5px;background:var(--navy-w);color:var(--navy); font-size:12px;font-weight:600;padding:4px 6px 4px 10px;border-radius:16px;white-space:nowrap} [dir="rtl"] .chip{padding:4px 10px 4px 6px} .chip-x{background:rgba(20,33,61,.14);border:none;color:var(--navy);width:16px;height:16px; border-radius:50%;cursor:pointer;font-size:12px;line-height:1;display:grid;place-items:center;font-family:inherit;padding:0;flex-shrink:0} .chip-x:hover{background:rgba(20,33,61,.26)} .chipsel-drop{display:none;position:absolute;top:calc(100% + 4px);inset-inline-start:0;inset-inline-end:0; background:#fff;border:1px solid var(--line);border-radius:8px;max-height:220px;overflow-y:auto; box-shadow:0 12px 30px -10px rgba(9,14,26,.28);z-index:1150} .chipsel-drop.flip-up{top:auto;bottom:calc(100% + 4px)} .chipsel-drop.on{display:block} .chipsel-opt{padding:9px 13px;font-size:13px;color:var(--ink);cursor:pointer} .chipsel-opt:hover{background:var(--page)} .chipsel-empty{padding:12px 13px;font-size:12.5px;color:var(--light)} /* the old design (a label above a value, on its own line, no consistent rhythm between them — the "too much space" the redesign was specifically asked to fix) is gone: every channel is now one colored icon directly beside its own value, nothing else, so there's no separate label spacing left to go wrong in the first place */ .changrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .chancard{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px; background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink); transition:transform .15s ease, box-shadow .15s ease} .chancard:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(9,14,26,.25)} .chancardicon{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center} .chancard>span.ltr{min-width:0;overflow-wrap:anywhere;font-size:14px;line-height:1.35} .chancard span.ltr{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .adcarousel{display:flex;align-items:center;gap:8px;padding:12px 0 20px;position:relative;margin-bottom:var(--adcarousel-gap,0px)} .adcarousel-viewport{overflow:hidden;flex:1;min-width:0} .adcarousel-track{display:flex;gap:10px;transition:transform .5s cubic-bezier(.4,0,.2,1)} .adcarousel-arrow{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2); background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 2px 8px -3px rgba(9,14,26,.25);color:var(--ink)} .adcarousel-arrow:hover{background:var(--page)} .adcarousel-arrow:disabled{opacity:.35;cursor:default} .adcarousel-arrow:disabled:hover{background:#fff} .adslot{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--page); border:1px solid var(--line);display:block;text-decoration:none;cursor:pointer;flex-shrink:0;width:var(--ad-size,130px); transition:transform .18s ease, box-shadow .18s ease, z-index 0s; z-index:1; opacity:0;animation:adFadeIn .4s ease forwards} .adslot:nth-child(1){animation-delay:.02s}.adslot:nth-child(2){animation-delay:.07s} .adslot:nth-child(3){animation-delay:.12s}.adslot:nth-child(4){animation-delay:.17s} .adslot:nth-child(5){animation-delay:.22s}.adslot:nth-child(6){animation-delay:.27s} .adslot:nth-child(7){animation-delay:.32s}.adslot:nth-child(8){animation-delay:.37s} @keyframes adFadeIn{from{opacity:0}to{opacity:1}} .adslot:hover{transform:scale(1.10);box-shadow:0 12px 28px -6px rgba(9,14,26,.4);z-index:5} .adslot img,.adslot video{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s ease} .adslot .adslot-noph{min-height:0;place-items:start center;padding-top:20%;background:#14213D}.adslot .adslot-noph img{width:62%!important} .adslot-embed{width:100%;height:100%;display:block;pointer-events:auto} .adslot-visit{position:absolute;bottom:3px;inset-inline-start:3px;font-size:9px;font-weight:600; padding:2px 6px;border-radius:4px;text-decoration:none;z-index:2} .adslot-empty{width:100%;height:100%;display:grid;place-items:center;color:var(--light); font-size:11px;text-align:center;padding:6px} .adslot-foot{position:absolute;bottom:0;inset-inline-start:0;inset-inline-end:0; display:flex;gap:6px;padding:6px 6px 5px;justify-content:center;flex-wrap:wrap} /* a listing's square (design A, owner 2026-10-20): «للبيع / للإيجار» at the top, then price · type and place · size and rooms, each one line (a long name ends in …); colours, shade and text sizes still come from the panel */ .adslot-deal{position:absolute;top:7px;inset-inline-start:7px;z-index:2;font-size:calc(var(--los,9px) + .5px);font-weight:700;line-height:1.5;padding:1px 8px;border-radius:999px;background:rgba(13,23,41,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;max-width:calc(100% - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .adslot-deal.rent{background:rgba(31,157,85,.9)} .adslot-info{position:absolute;inset-inline:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:48px 9px 7px;pointer-events:none} .adslot-info>span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--ad-ts,0 1px 3px rgba(0,0,0,.75))} .adslot-info .adslot-price{font-family:'Lato',var(--fd);font-weight:900;font-size:calc(var(--ris,9px) + 6px);line-height:1.2;letter-spacing:.2px} .adslot-info .adslot-l2{font-size:calc(var(--los,9px) + 1px);font-weight:600;opacity:.9;line-height:1.45} .adslot-info .adslot-l3{font-size:var(--ris,9px);opacity:.72;line-height:1.45} .adslot-info .adslot-l3 svg{width:1.15em;height:1.15em;vertical-align:-.2em} .adslot-foot span{font-weight:600;position:relative;z-index:1;text-shadow:var(--ad-ts,0 1px 3px rgba(0,0,0,.75))}.adslot-place{z-index:1;text-shadow:var(--ad-ts,0 1px 3px rgba(0,0,0,.75))} .adslot-place{position:absolute;top:3px;inset-inline-start:5px;font-weight:600; padding:1px 6px;border-radius:4px} .adslot-overtext{position:absolute;inset-inline-start:0;inset-inline-end:0; padding:6px 8px;font-weight:700;text-align:center;line-height:1.25;z-index:2} .adslot-overtop{top:0} .adslot-overbottom{bottom:0} .adtag{position:absolute;top:3px;inset-inline-end:3px; padding:1px 5px;border-radius:3px;letter-spacing:.03em} @media(max-width:520px){.adrow{gap:7px}} .fg:last-child{border:none} .fg h4{font-size:12px;color:var(--light);font-weight:600;margin-bottom:8px} .fg select,.fg input{width:100%;border:1px solid var(--line-2);border-radius:6px;padding:8px 10px;font-size:14px;margin-bottom:7px} .fg .chipsel-input{border:none;padding:0;margin-bottom:0;width:100%} .ck{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--grey);padding:2px 0;cursor:pointer} .ck input{accent-color:var(--navy);width:15px;height:15px;margin:0} .ck .c{margin-inline-start:auto;font-size:11.5px;color:var(--light)} .topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .topbar h1{font-size:20px;font-weight:700} .topbar .n{font-size:13.5px;color:var(--grey)} .topbar select{margin-inline-start:auto;background:#fff;border:1px solid var(--line-2);padding:8px 13px;border-radius:6px;font-size:13.5px} .res{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-size,238px),1fr));gap:15px} @media(max-width:640px){ .res:not(.list-view){grid-template-columns:repeat(auto-fill,minmax(var(--card-size-mobile,150px),1fr));gap:10px} } .viewtoggle{display:flex;gap:4px;margin-inline-start:auto;margin-inline-end:10px} .viewtoggle button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line-2); background:#fff;border-radius:var(--r-s);cursor:pointer;color:var(--light)} .viewtoggle button.on{background:var(--navy);border-color:var(--navy);color:#fff} .res.list-view{display:flex;flex-direction:column;gap:10px} .res.list-view .card{display:flex;flex-direction:row;height:128px;overflow:hidden} .res.list-view .card .ph{width:min(var(--card-size,238px),260px);flex-shrink:0;height:100%;aspect-ratio:auto;position:relative} .res.list-view .card .ph img,.res.list-view .card .ph .nophoto{height:100%;aspect-ratio:auto} .res.list-view .card .bd{top:6px;inset-inline-start:6px;gap:4px} .res.list-view .card .bd span{font-size:10.5px;padding:2px 7px} .res.list-view .card .cb{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;overflow:hidden;padding:10px 14px} .res.list-view .card .cb-toprow{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .res.list-view .card .cb-toprow .p{font-size:18px;white-space:nowrap} .res.list-view .card .cb-loc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:end} .res.list-view .card .cb-details{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;font-size:12.5px;color:var(--grey);white-space:nowrap;overflow:hidden;min-height:0;max-height:none} .res.list-view .card .d{margin-top:auto;padding-top:4px} @media(max-width:640px){.res.list-view .card{flex-direction:column;height:auto} .res.list-view .card .ph{width:auto;height:160px}} .pg{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap} .pg a{min-width:36px;height:36px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:14px;cursor:pointer} .pg a.on{background:var(--navy);color:#fff;border-color:var(--navy)} /* listing view */ .page2{display:grid;grid-template-columns:1fr 300px;gap:18px;padding:18px 0 40px;align-items:start;max-width:1040px;margin:0 auto} @media(max-width:960px){.page2{grid-template-columns:1fr}} .gal{position:relative;background:#0D1729;border-radius:8px 8px 0 0;overflow:hidden} .gal img.main{width:100%;max-height:60vh;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in} .gnav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.92);border:none;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:17px;color:var(--navy)} .thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:6px;background:#fff} .thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;cursor:pointer;opacity:.6} .thumbs img.sel{opacity:1;outline:2px solid var(--gold);outline-offset:-2px} .lightbox{position:fixed;inset:0;background:rgba(10,14,24,.94);z-index:1200;display:flex; align-items:center;justify-content:center;padding:20px} .lb-img{max-width:min(92vw,1100px);max-height:88vh;object-fit:contain;border-radius:6px} .lb-close{position:absolute;top:16px;inset-inline-end:20px;background:rgba(255,255,255,.12); color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1} .lb-close:hover{background:rgba(255,255,255,.22)} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12); color:#fff;border:none;width:48px;height:48px;border-radius:50%;font-size:26px;cursor:pointer} .lb-nav:hover{background:rgba(255,255,255,.22)} .lb-count{position:absolute;bottom:20px;inset-inline-start:50%;transform:translateX(-50%); background:rgba(255,255,255,.12);color:#fff;font-size:13px;padding:5px 14px;border-radius:14px} .keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)} .simcarousel{overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none} .simcarousel::-webkit-scrollbar{display:none} .simtrack{display:flex;gap:14px} .simtrack .card{flex:0 0 260px;width:260px} @media(max-width:640px){.simtrack .card{flex-basis:150px;width:150px}} .keys div{background:#fff;padding:13px 8px;text-align:center} .keys b{display:block;font-size:17px;font-weight:700;color:var(--navy)} .keys span{font-size:12px;color:var(--grey)} .spec{display:grid;grid-template-columns:1fr 1fr;gap:0 30px} @media(max-width:620px){.spec{grid-template-columns:1fr}} .spec div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dotted var(--line);font-size:14px} .spec .k2{color:var(--grey)} .spec .v2{font-weight:600} .deed{background:var(--ok-w);border:1px solid #CFE5D9;border-radius:8px;padding:15px 17px} .deed h3{font-size:15px;font-weight:700;color:var(--ok);margin-bottom:6px} .deed li{list-style:none;font-size:13.5px;color:#3A5A4B;padding:3px 0} .deed li::before{content:"✓";color:var(--ok);font-weight:700;margin-inline-end:8px} .util{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px} .amenlist{display:flex;flex-wrap:wrap;gap:10px} .amenchip{background:var(--ok-w);color:var(--ok);font-size:13px;font-weight:600;padding:6px 12px;border-radius:20px} .util div{border:1px solid var(--line);border-radius:6px;padding:11px 13px} .util b{display:block;font-size:15.5px;font-weight:700} .util span{font-size:12.5px;color:var(--grey)} .phone{width:100%;background:var(--navy);color:#fff;border:none;padding:10px;border-radius:6px;font-weight:600;font-size:13.5px;cursor:pointer;margin-top:10px} .wa2{width:100%;background:#25976C;color:#fff;border:none;padding:10px;border-radius:6px;font-weight:600;font-size:13.5px;cursor:pointer;margin-top:7px} .gh{width:100%;background:#fff;border:1px solid var(--line-2);padding:10px;border-radius:6px;font-size:14px;cursor:pointer;margin-top:8px} .safe{background:var(--gold-w);border:1px solid #EDDCB6;border-radius:6px;padding:12px 14px;font-size:12.5px;color:#6B5518;line-height:1.7} /* post view */ .blk{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:10px} .dzblk{border:1px solid var(--danger);background:#fff7f6} .dzconfirm{max-width:360px} .blk h3{font-size:16px;font-weight:700;padding:12px 18px;border-bottom:1px solid var(--line);display:flex;gap:9px;align-items:center} .blk h3 .n{width:23px;height:23px;border-radius:50%;background:var(--navy);color:#fff;font-size:12.5px;display:grid;place-items:center} .blk .in{padding:16px 18px} .fl{margin-bottom:10px} .fl>label{display:block;font-size:13.5px;font-weight:600;margin-bottom:4px} .fl input,.fl select,.fl textarea{width:100%;border:1px solid var(--line-2);border-radius:6px;padding:8px 11px;font-size:14px;font-family:inherit} /* post/edit forms: iPhone Safari paints native selects grey and the area search box differently — one white look for every picker */ .blk .fl select{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat;background-size:16px;background-position:left 12px center;padding-inline-end:36px;color:var(--ink)} [dir=ltr] .blk .fl select{background-position:right 12px center} .fl .acombo .chipsel-box{height:auto;min-height:40px;border:1px solid var(--line-2);border-radius:6px;padding:0 11px;background:#fff} .fl .acombo .chipsel-input{border:0;border-radius:0;padding:8px 0;height:auto;font-size:14px;background:transparent;box-shadow:none} .fl .acombo .chev{color:#6B7280;width:16px;height:16px;flex:none} @media(max-width:640px){.fl .acombo .chipsel-box{min-height:46px}.fl .acombo .chipsel-input{font-size:16px}} .fl textarea{min-height:90px;line-height:1.6} .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} @media(max-width:640px){.row,.row3{grid-template-columns:1fr}} .pick{display:flex;gap:8px;flex-wrap:wrap} .pick label{cursor:pointer;position:relative} .pick input{position:absolute;opacity:0} .pick span{display:block;border:1px solid var(--line-2);border-radius:20px;padding:8px 16px;font-size:14px} .pick input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)} .pick span span{display:inline;border:0;padding:0;border-radius:0;background:transparent} /* the green-deed text wrapper must not draw a second pill */ .hintx{font-size:12px;color:var(--light);margin-top:4px} .bar2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 18px;position:sticky;bottom:12px;box-shadow:0 -2px 14px rgba(20,33,61,.09)} .bar2 .msg{flex:1 1 160px}.bar2 .gh{width:auto;padding:10px 18px;margin:0;border-radius:6px} /* cancel sits beside save, not on its own full-width row */ .bar2 .msg{font-size:13px;color:var(--grey);margin-inline-end:auto} .btn-n{background:var(--navy);color:#fff;border:none;padding:11px 26px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer} footer{background:var(--navy);color:rgba(255,255,255,.72);padding:36px 0 42px;font-size:13px;margin-top:26px} footer a{cursor:pointer}footer a:hover{color:var(--gold)} .flinks{display:flex;flex-wrap:wrap;gap:2px 14px;margin-bottom:18px} .flinks a{display:inline-block;padding:6px 0;line-height:1.3} .chip .chip-x{display:inline-grid;place-items:center;width:26px;height:26px;margin:-4px -6px -4px 2px;font-size:16px} .rs-chip button{min-width:26px;min-height:26px} .notif-x{min-width:32px;min-height:32px} .fbot{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} .crumb{background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:var(--grey);padding:9px 0} .crumb a{cursor:pointer}.crumb a:hover{color:var(--navy);text-decoration:underline} .crumb i{margin-inline:6px;color:var(--line-2);font-style:normal} .ava{border-radius:50%;object-fit:cover;background:var(--navy-w);color:var(--navy); display:grid;place-items:center;font-weight:700;flex:0 0 auto;overflow:hidden} .ava.big{box-shadow:0 2px 10px rgba(20,33,61,.14)} .profcard{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh)} .profhead{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;flex-wrap:wrap} .profmeta{min-width:200px;flex:1} .profmeta h1{font-size:22px;font-weight:700;line-height:1.5} .profmeta .pl{font-size:13.5px;color:var(--grey)} .profmeta .bio{font-size:14px;color:var(--body);margin-top:8px;max-width:60ch;line-height:1.8;white-space:pre-line} /* longer bios keep their paragraphs (2026-10-03) */ .vbadge{background:var(--ok-w);color:var(--ok);font-size:12px;font-weight:700; padding:3px 9px;border-radius:5px;vertical-align:middle;white-space:nowrap} .vbadge.soft{background:var(--gold-w);color:#8a5d10} .au-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}.aubody label.au-type{display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;cursor:pointer;text-align:center;margin:0}.au-type input{display:none}.au-type b{display:block;font-size:14px;color:var(--navy)}.au-type small{display:block;font-size:11.5px;color:var(--grey);line-height:1.35}.aubody label.au-type.on{border-color:var(--gold);background:var(--gold-w)} @media(max-width:480px){.au-types{grid-template-columns:1fr}.aubody label.au-type{flex-direction:row;align-items:center;justify-content:space-between;text-align:start}} .profstats{display:flex;gap:22px;margin-inline-start:auto;text-align:center} .profstats b{display:block;font-size:22px;font-weight:700;color:var(--navy)} .profstats span{font-size:12.5px;color:var(--grey)} @media(max-width:640px){.profstats{margin:14px 0 0;width:100%;justify-content:space-around}} /* home: two big choices then the type grid */ .deals{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px} @media(max-width:520px){.deals{grid-template-columns:1fr}} .dealcard{background:#fff;border:2px solid var(--line);border-radius:12px;padding:20px 22px;cursor:pointer;transition:.18s} .dealcard:hover{border-color:var(--line-2)} .dealcard.on{border-color:var(--navy);background:var(--navy-w)} .dealcard b{display:block;font-size:20px;font-weight:700;color:var(--navy)} .dealcard span{font-size:13.5px;color:var(--grey)} .typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px} .typecell{background:#fff;border:1px solid var(--line);border-radius:9px;padding:14px 15px; display:flex;justify-content:space-between;align-items:center;transition:.16s} .typecell:hover{border-color:var(--gold);transform:translateY(-2px)} .typecell b{font-size:14.5px;font-weight:600} .typecell span{color:var(--light);font-size:12.5px} /* agreement */ .agree{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--body); margin:4px 0 6px;cursor:pointer;line-height:1.6} .agree input{accent-color:var(--navy);width:17px;height:17px;flex:0 0 auto;margin-top:2px} .agreelist{margin:0 0 10px;padding-inline-start:24px;font-size:12.5px;color:var(--grey);line-height:1.55} /* phone-first polish */ @media(max-width:700px){ .wrap{padding-inline:14px} .hbar{height:60px;gap:12px} .hbar .gold[data-go="post"]{display:none} .mobfab{display:flex;align-items:center;justify-content:center;gap:6px; position:fixed;bottom:18px;inset-inline-end:16px;z-index:1120; width:auto;height:52px;padding:0 20px;border-radius:26px; background:var(--gold);color:#1A1206;font-weight:700;font-size:14px; box-shadow:0 10px 24px -6px rgba(196,136,31,.55);border:none;cursor:pointer; text-decoration:none;transition:opacity .25s,transform .25s} body.fab-hide .mobfab{opacity:0;pointer-events:none;transform:translateY(24px)} .hero{min-height:auto;padding:26px 0 22px} .hero h1{font-size:22px;line-height:1.45} .sbar{border-radius:10px} .stabs button{padding:11px 8px;font-size:13px} .sf{padding:11px 14px} .sec{padding:22px 0 4px} .sec h2{font-size:18px} .res,.grid,.tiles{grid-template-columns:1fr!important;gap:12px} .card .shot{height:210px} .page2,.lay,.cols{gap:14px} .keys{grid-template-columns:repeat(3,1fr)} .spec{grid-template-columns:1fr} .bar2{position:sticky;bottom:0;border-radius:10px 10px 0 0} .htools .mini{padding:6px 9px;font-size:12px} .gnav{width:44px;height:44px;font-size:20px} .thumbs{grid-template-columns:repeat(4,1fr)} .astats{grid-template-columns:repeat(2,1fr)} .astatgrid{grid-template-columns:1fr!important} .atable table{font-size:12.5px} /* the users table specifically (the one flagged as having its values drift out of alignment with their headers) switches from a normal table to a stack of labeled rows below this width — every value gets its own explicit label right next to it, so there's no longer a column position for anything to drift out of in the first place */ .atable-stack table,.atable-stack thead,.atable-stack tbody,.atable-stack tr{display:block} .atable-stack thead{position:absolute;inset-inline-start:-9999px} .atable-stack tr{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;padding:6px 0} .atable-stack td{display:flex;align-items:center;gap:10px;border-bottom:none;padding:6px 12px} .atable-stack td[data-label]:not([data-label=""])::before{ content:attr(data-label);flex:0 0 40%;font-weight:600;color:var(--grey);font-size:11px} .band{padding:22px 20px} footer{padding:28px 0 34px} } @media(max-width:420px){ .hero h1{font-size:19px} .dealcard{padding:16px 18px} .typegrid{grid-template-columns:1fr 1fr} } .mineWrap{position:relative} .mineBar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px} .leaflet-layer.hu-osm{filter:invert(1) hue-rotate(200deg) saturate(.7) brightness(1.35) contrast(.78)} .hu-msw{display:flex;background:rgba(17,33,63,.92);border:1px solid rgba(255,255,255,.22);border-radius:8px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.3)} .hu-msw button{border:0;background:none;color:#fff;font:600 13px var(--f);padding:7px 12px;cursor:pointer}.hu-msw button.on{background:var(--gold);color:var(--navy)} .lmaprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}.lmaprow .lmapnote{margin:0;flex:1 1 220px} .gmapbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;border:1px solid rgba(202,144,81,.6);color:var(--gold);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap} .gmapbtn:hover{background:rgba(202,144,81,.12)} @media (max-width:640px){ .gmapbtn{flex:1 1 100%;justify-content:center} } .res-ad .ph img,.res-ad .ph video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover} .res-ad .cbg.res-adtag{background:rgba(17,33,63,.82);color:#fff;border:1px solid rgba(255,255,255,.25)} .res-ad{border-color:rgba(202,144,81,.45)!important}.res-ad .cb{display:flex;flex-direction:column;gap:6px} html body .res-ad .cb .ctitle{order:1;font-size:18px}html body .res-ad .cb .res-adtxt{order:2}html body .res-ad .cb .res-adcta{order:3} .res-adtxt{font-size:14px;line-height:1.55;opacity:.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .res-adcta{margin-top:auto;padding-top:6px}.res-adcta span{display:inline-flex;align-items:center;justify-content:center;width:100%;height:40px;border-radius:8px;background:#CA9051;color:#11213F;font-weight:800;font-size:14.5px} .res.list-view .res-ad .ph img,.res.list-view .res-ad .ph video{height:100%;aspect-ratio:auto} .side-ad{position:relative;display:block;flex-shrink:0;border-top:1px solid var(--line);background:#0d1a33;text-decoration:none} .side-ad img,.side-ad video{display:block;width:100%;aspect-ratio:1200/628;object-fit:cover} .side-ad .res-ad-tag,.res-ad-tag{position:absolute;top:10px;inset-inline-start:10px;z-index:2;font-size:11px;font-weight:700;color:#fff;background:rgba(17,33,63,.78);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:2px 9px} .adrep-h .adrep-k{color:var(--gold);font-weight:700;font-size:13px}.adrep-h h1{font-size:28px;margin:4px 0}.adrep-h p{color:var(--grey)}.adrep-h p b.on{color:var(--ok)} .adrep-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.adrep-kpis div{border:1px solid var(--line);border-radius:12px;padding:16px}.adrep-kpis b{display:block;font-size:30px}.adrep-kpis span{color:var(--grey)} .adrep h2{font-size:18px;margin:8px 0 10px}.adrep-days{display:grid;gap:6px}.adrep-d{display:grid;grid-template-columns:56px 1fr 56px 44px;gap:10px;align-items:center;font-size:13px} .adrep-d i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--gold),#E3B57E);width:var(--w)}.adrep-d em{font-style:normal;color:var(--grey)}.adrep-note{color:var(--grey);font-size:12.5px;margin-top:16px} .done-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}.done-acts>button{flex:0 1 220px;min-width:0;height:46px;margin:0!important;padding:0 16px;white-space:nowrap} .mineBar .mstat{font-size:13px;color:var(--grey);padding:0 4px} .mineBar .st{margin-inline-end:auto} .nophoto{width:100%;height:100%;min-height:120px;display:grid;place-items:center; background:#14213D;color:#9AA3AC;font-size:12.5px;font-weight:600} .nophoto img,.mappin-nophoto img{position:static!important;inset:auto!important;width:55%!important;max-width:200px!important;min-height:0!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;opacity:.95} .card .ph .nophoto{aspect-ratio:4/3} .card .ph video.vcover{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#0D1729;pointer-events:none} .res.list-view .card .ph video.vcover{height:100%;aspect-ratio:auto} .wasprice{text-decoration:line-through;color:var(--light);font-size:.62em;font-weight:500;margin-inline-start:6px} .cutbadge{background:#EAF5EF;color:var(--ok);font-size:.55em;font-weight:700; padding:2px 7px;border-radius:4px;margin-inline-start:6px;vertical-align:middle;white-space:nowrap} /* admin */ .abar{background:var(--navy);color:#fff;padding:12px 0} .abar b{color:var(--gold)} .astats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin-bottom:16px} .astat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 10px;text-align:center;font-family:inherit;cursor:pointer;display:block;width:100%} .astat:hover{border-color:var(--gold)} .astat b{display:block;font-size:20px;font-weight:700;color:var(--navy)} .astat span{font-size:12px;color:var(--grey)} .ashell{display:flex;align-items:flex-start;gap:0;max-width:1400px;margin:0 auto} .asidebar{width:206px;flex-shrink:0;background:#fff;border-inline-end:1px solid var(--line); min-height:calc(100vh - 54px);padding:12px 8px;position:sticky;top:0} .asidebar-group{margin-bottom:10px} .asidebar-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--light); text-transform:uppercase;padding:6px 8px 3px} .asidebar-danger-sep{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)} .asidebar-danger-sep a{color:var(--danger)} .asidebar a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px; font-size:13.5px;color:var(--ink);cursor:pointer;text-decoration:none;font-weight:500; white-space:nowrap;position:relative;line-height:1.3} .asidebar a:hover{background:var(--page)} .asidebar a.on{background:var(--navy-w);color:var(--navy);font-weight:700} .asidebar a .aicon{width:16px;height:16px;flex-shrink:0;display:grid;place-items:center;opacity:.75} .asidebar a .aicon svg{width:15px;height:15px} .asidebar a.on .aicon{opacity:1} .asidebar a .abadge2{margin-inline-start:auto;background:var(--danger);color:#fff;font-size:10px; font-weight:700;border-radius:10px;padding:1px 6px;line-height:1.4} .acontent{flex:1;min-width:0;padding:16px 18px 60px} .amobiletoggle{display:none} @media(max-width:900px){ .ashell{flex-direction:column} .asidebar{width:100%;min-height:auto;position:static;border-inline-end:none; border-bottom:1px solid var(--line);display:none;padding:10px} .asidebar.on{display:block} .amobiletoggle{display:flex;align-items:center;gap:8px;width:100%;justify-content:center; background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:10px;margin:10px 18px 0; font-weight:600;font-size:14px;cursor:pointer} .acontent{padding:14px 14px 50px} } .atable{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:auto} .atable table{width:100%;border-collapse:collapse;font-size:13.5px} .atable th{background:var(--page);text-align:start;padding:10px 12px;font-weight:600; color:var(--grey);font-size:12px;white-space:nowrap;border-bottom:1px solid var(--line)} .atable td{padding:6px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px} .lvlpick{font-size:12.5px;padding:3px 6px;border-radius:5px;border:1px solid var(--line-2);background:#fff} .atable tr:last-child td{border-bottom:none} .adashgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:16px} .adashcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px} .adashcard h4{font-size:14px;font-weight:700;margin-bottom:12px;color:var(--ink)} .abarrow{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:13px} .abarrow .abarlabel{width:110px;flex-shrink:0;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .abartrack{flex:1;height:8px;background:var(--page);border-radius:4px;overflow:hidden} .abarfill{height:100%;background:var(--navy);border-radius:4px;transition:width .4s ease} .abarval{width:38px;flex-shrink:0;text-align:end;font-weight:700;color:var(--ink);font-size:12.5px} .adashempty{color:var(--light);font-size:13px;text-align:center;padding:24px 0} .ab{background:#fff;border:1px solid var(--line-2);padding:5px 11px;border-radius:5px; font-size:12.5px;cursor:pointer;font-family:inherit;margin-inline-end:5px} .ab:hover{border-color:var(--navy)} .ab.ok{color:var(--ok);border-color:#BFE0CE} .ab.bad{color:var(--danger);border-color:#EBC9C6} .abar .ab{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)} .st{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:4px;white-space:nowrap} .st-live{background:var(--ok-w);color:var(--ok)} .st-pending{background:var(--gold-w);color:var(--gold)} .st-expired,.st-removed{background:#F1F1F2;color:var(--grey)} .st-hidden{background:#EEF1F7;color:var(--navy)} .shot2 .kb{position:absolute;top:4px;inset-inline-start:4px;background:rgba(13,23,41,.72); color:#fff;font-size:10px;padding:1px 6px;border-radius:4px} .pw{display:flex} .ccpick{flex-shrink:0} .ccpick-btn{background:var(--page);border:1px solid var(--line-2);border-inline-end:none; border-radius:6px 0 0 6px;padding:11px 10px;font-size:15px;font-weight:600;color:var(--ink); min-width:82px;cursor:pointer;font-family:inherit;display:flex;align-items:center; justify-content:center;gap:5px;height:100%;outline:none} .ccpick-btn:focus{box-shadow:inset 0 0 0 2px var(--navy);z-index:1;position:relative} .ccpick-arrow{font-size:10px;color:var(--grey)} .ccpick-drop{position:absolute;top:calc(100% + 4px);inset-inline-start:0;width:min(320px,calc(100vw - 32px)); background:#fff;border:1px solid var(--line-2);border-radius:10px; box-shadow:0 12px 30px -10px rgba(9,14,26,.3);z-index:1091;overflow:hidden} .ccpick-search{width:100%;border:none;border-bottom:1px solid var(--line);padding:11px 13px; font-size:14.5px;font-family:inherit;outline:none} .ccpick-list{max-height:280px;overflow-y:auto;overscroll-behavior:contain} .ccpick-item{padding:8px 12px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:9px;min-height:40px} .ccpick-item:hover,.ccpick-item.kb{background:var(--page)} .ccpick-item.on{background:var(--navy-w);font-weight:600} .ccpick-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ccpick-iso{font-size:11px;color:var(--light);letter-spacing:.5px} .ccpick-code{color:var(--grey);font-variant-numeric:tabular-nums} .ccflag{display:inline-flex;width:22px;height:15px;flex:none;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08)} .ccflag .flg{width:22px;height:15px;display:block}.ccflag .flg-t{display:inline-block;width:22px;height:15px;font-size:9px;line-height:15px;text-align:center;background:#E9ECF2;color:#4b5563;font-weight:700;letter-spacing:.3px} .ccpick-btn .ccflag{margin-inline-end:1px} .ccpick-empty{padding:14px;text-align:center;color:var(--grey);font-size:13.5px} .pw input{flex:1;border:1px solid var(--line-2);border-radius:0 6px 6px 0;padding:9px 12px; font-size:14px;text-align:left;direction:ltr;letter-spacing:1px;width:100%} /* auth */ .au{position:fixed;inset:0;background:rgba(9,14,26,.62);backdrop-filter:blur(3px);z-index:1300;display:none;align-items:center;justify-content:center;padding:20px} .au.on{display:flex;animation:auf .2s ease} @keyframes auf{from{opacity:0}to{opacity:1}} .aubox{background:#fff;border-radius:10px;width:100%;max-width:396px;max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden;box-shadow:0 24px 60px -18px rgba(9,14,26,.5);animation:aup .26s cubic-bezier(.22,.61,.36,1)} @keyframes aup{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}} @keyframes mapfDown{from{transform:scaleY(.35) translateY(-6px);opacity:0}to{transform:scaleY(1) translateY(0);opacity:1}} @keyframes mapfUp{from{transform:scaleY(1) translateY(0);opacity:1}to{transform:scaleY(.35) translateY(-6px);opacity:0}} .mapf-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:6px; background:rgba(255,255,255,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.6);border-radius:10px;padding:11px 16px;font-size:14px; font-weight:600;color:var(--ink);cursor:pointer;box-shadow:0 6px 20px -8px rgba(9,14,26,.25)} .mapf-mainbtn{width:240px;display:flex;align-items:center;justify-content:center;gap:6px; background:#fff;border:1.5px solid var(--navy);border-radius:10px;padding:13px 22px;font-size:15px; font-weight:700;color:var(--navy);cursor:pointer;box-shadow:0 6px 16px -8px rgba(9,14,26,.3)} .mapf-mainbtn:hover{background:var(--page)} .mapf-panel{margin-top:8px;padding:14px;border-radius:10px; background:rgba(255,255,255,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.45);box-shadow:0 12px 30px -10px rgba(9,14,26,.3); transform-origin:top center; animation:mapfDown .24s cubic-bezier(.2,.9,.3,1.15)} .mapf-panel .fl select{background:#fff;opacity:1} .mapf-panel.mapf-closing{animation:mapfUp .18s cubic-bezier(.4,0,1,1) forwards} .autop{background:var(--navy);color:#fff;padding:12px 18px;display:flex;align-items:center} .autop b{font-size:16px} .autop button{margin-inline-start:auto;background:none;border:none;color:rgba(255,255,255,.7);font-size:19px;cursor:pointer;line-height:1} .autabs{display:flex;border-bottom:1px solid var(--line)} .autabs button{flex:1;background:none;border:none;padding:10px;font-size:14.5px;font-weight:600;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent} .autabs button.on{color:var(--navy);border-bottom-color:var(--gold)} .aubody{padding:16px} .auf{margin-bottom:10px} .pwwrap{position:relative} .pwwrap input{width:100%;padding-inline-end:38px} /* every password field on the site already has its own custom show/hide eye button (built above) — browsers like Edge/IE inject their own native reveal icon into ANY the instant the user starts typing, regardless of whether one exists already, which is exactly what showed up as "two eye icons". Hiding the browser's own controls here, site-wide, avoids that. */ input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear{display:none} input[type="password"]::-webkit-credentials-auto-fill-button, input[type="password"]::-webkit-strong-password-auto-fill-button{ visibility:hidden;display:none !important;pointer-events:none;position:absolute;right:0} .pwtoggle{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:8px; background:none;border:none;padding:4px;cursor:pointer;color:var(--grey);display:flex;align-items:center} .pwtoggle:hover{color:var(--ink)} .auf label{display:block;font-size:12.5px;color:var(--grey);margin-bottom:4px} .auf input{width:100%;border:1px solid var(--line-2);border-radius:6px;padding:9px 12px;font-size:14px} .auf input:focus{border-color:var(--navy);outline:none} .pw{display:flex;direction:ltr} .pw input{border-radius:0 6px 6px 0;text-align:left;letter-spacing:1px} .aub{width:100%;background:var(--navy);color:#fff;border:none;padding:10px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer} .aub:hover{background:#1C2E52} .aub:disabled{background:var(--line-2);cursor:not-allowed} .auw{width:100%;background:#25976C;color:#fff;border:none;padding:12px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer;display:block;text-align:center;text-decoration:none} .aun{font-size:12px;color:var(--light);margin-top:8px;line-height:1.5;text-align:center} .aun a{color:var(--navy);font-weight:600;cursor:pointer} .auerr{color:var(--danger);font-size:12.5px;text-align:center;min-height:18px;margin-top:6px} .otp{display:flex;gap:8px;direction:ltr;justify-content:center;margin:6px 0} .otp input{width:44px;height:52px;text-align:center;font-size:22px;font-weight:700;border:1px solid var(--line-2);border-radius:7px} .otp input:focus{border-color:var(--gold);outline:none} .aucode{font-size:34px;font-weight:700;letter-spacing:5px;color:var(--navy);text-align:center;margin:4px 0 10px;direction:ltr} .audone{text-align:center;padding:10px 0 4px} .audone .tk{width:52px;height:52px;border-radius:50%;background:var(--ok-w);color:var(--ok);display:grid;place-items:center;font-size:26px;margin:0 auto 12px} .notifwrap{position:relative} .bell{position:relative;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22); color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px; display:grid;place-items:center} .bellbadge{position:absolute;top:-4px;inset-inline-end:-4px;background:var(--danger);color:#fff; font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:10px; display:grid;place-items:center;padding:0 3px;line-height:1} .notifmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:#fff; border:1px solid var(--line);border-radius:8px;width:320px;max-width:88vw; box-shadow:0 12px 30px -10px rgba(9,14,26,.34);display:none;overflow:hidden;z-index:90; max-height:70vh;overflow-y:auto} .notifmenu.on{display:block} .notifmenu.fx{position:fixed;width:auto;max-width:none;inset-inline-end:auto;border-radius:12px} .notifhead{padding:12px 15px;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--line);color:var(--ink)} .notifitem{display:block;position:relative;padding:11px 36px 11px 15px;border-bottom:1px solid var(--line);cursor:pointer}[dir=ltr] .notifitem{padding:11px 15px 11px 36px} .notif-x{position:absolute;top:8px;inset-inline-end:8px;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--light);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center} .notif-x:hover{background:var(--page);color:var(--danger)} .notifhead{display:flex;align-items:center;justify-content:space-between;gap:10px} .notif-clear{border:0;background:none;color:var(--grey);font:600 12px var(--f);cursor:pointer;padding:2px 4px}.notif-clear:hover{color:var(--danger)} .notifitem:last-child{border-bottom:none} .notifitem:hover{background:var(--page)} .notifitem.unread{background:var(--gold-w)} .notifitem b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px} .notifitem span{display:block;font-size:12.5px;color:var(--grey);line-height:1.5} .notifitem i{display:block;font-style:normal;font-size:11px;color:var(--light);margin-top:4px} .notifempty{padding:26px 15px;text-align:center;font-size:13px;color:var(--light)} .acct{position:relative} .chip2{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;padding:5px 11px 5px 6px;border-radius:20px;cursor:pointer;font-size:13px} .chip2 .av{width:25px;height:25px;border-radius:50%;background:var(--gold);color:#1A1206;display:grid;place-items:center;font-weight:700;font-size:12.5px} /* z-index:1150 — safely above every regular page-level element (including the map search page's own top row at 1091, which is exactly what was silently painting over these dropdowns whenever they overlapped it — the actual cause of both the language dropdown and the "More" menu appearing to open "behind" things specifically on that page), while still correctly staying below the lightbox (1200) and the auth modal (1300) it's meant to. Since every dropdown built on top of this class (the "More" nav menu, the language switcher, the account menu, notifications) is global navigation, it should always layer above ordinary page content, not just most of it. */ .menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:#fff;border:1px solid var(--line);border-radius:8px;min-width:200px;box-shadow:0 12px 30px -10px rgba(9,14,26,.34);display:none;overflow:hidden;z-index:1150} .menu.on{display:block} .menu a{display:block;padding:10px 15px;font-size:14px;color:var(--ink);cursor:pointer} .menu a[data-langpick]{display:flex;align-items:center;gap:9px} .menu a[data-langpick].on{background:var(--navy-w);font-weight:600} .langflag{display:inline-flex;flex-shrink:0;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08)} .langflag svg{display:block} .menu a.menupost{color:#8A6522;font-weight:700;background:var(--gold-w)} .menu a.menupost:hover{background:var(--gold-w)} .menu a:hover{background:var(--page)} .menu .sep{border-top:1px solid var(--line)} .menu .out{color:var(--danger)} /* post form */ .steps{display:flex;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:18px} .steps div{flex:1;padding:11px 6px;text-align:center;font-size:12.5px;color:var(--light);border-inline-end:1px solid var(--line)} .steps div:last-child{border:none} .steps div.done{color:var(--ok);background:var(--ok-w)} .steps b{display:block;font-size:11px;opacity:.75} .req::after{content:"*";color:var(--danger);margin-inline-start:3px} .drop{border:2px dashed var(--line-2);border-radius:8px;padding:24px;text-align:center;cursor:pointer;background:var(--page)} .drop:hover,.drop.over{border-color:var(--gold);background:var(--gold-w)} .drop b{display:block;font-size:15px;margin-bottom:3px} .drop span{font-size:13px;color:var(--grey)} .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px;margin-top:12px} .shot2{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3} .shot2 img{width:100%;height:100%;object-fit:cover} .shot2 .rm{position:absolute;top:4px;inset-inline-end:4px;background:rgba(13,23,41,.8);color:#fff;border:none;width:21px;height:21px;border-radius:50%;cursor:pointer;font-size:12px;line-height:1} .shot2 .cv{position:absolute;bottom:0;left:0;right:0;background:rgba(20,33,61,.85);color:#fff;font-size:10.5px;text-align:center;padding:2px} /* photo order (owner, 2026-10-19): the first photo is the cover; the owner moves photos or picks the cover — never picked for them */ .shots.ordered{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} .shot2 .ord{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:3px;padding:16px 4px 4px;background:linear-gradient(rgba(13,23,41,0),rgba(13,23,41,.78))} .shot2 .ord button{flex:none;width:26px;height:26px;border-radius:50%;border:none;background:rgba(13,23,41,.82);color:#fff;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;padding:0;font-family:inherit} .shot2 .ord button:focus-visible{outline:2px solid var(--gold,#C4881F);outline-offset:1px} .shot2 .ord button[disabled]{visibility:hidden} .shot2 .ord .mkcv{flex:0 1 auto;width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;border-radius:13px;padding:0 9px;font-size:11px;white-space:nowrap} .shot2 .ord .mkcv:hover{background:var(--gold,#C4881F)} .shot2 .ord .iscv{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;height:22px;line-height:22px;border-radius:11px;padding:0 9px;background:var(--gold,#C4881F);color:#fff;font-size:11px;font-weight:700;white-space:nowrap} .shot2.first{outline:2px solid var(--gold,#C4881F);outline-offset:-2px} .tipbox{background:var(--navy-w);border:1px solid #D7DEEC;border-radius:6px;padding:12px 15px;font-size:13px;color:#2E3E5E;line-height:1.85;margin-top:13px} .deedbox{border-radius:6px;padding:12px 15px;margin-top:11px;font-size:13px;line-height:1.8;display:none} .deedbox.on{display:block} .deedbox.g{background:var(--ok-w);border:1px solid #CFE5D9;color:#33604B} .deedbox.y{background:var(--gold-w);border:1px solid #EDDCB6;color:#6B5518} .msg.bad{color:var(--danger)} .done2{background:#fff;border:1px solid var(--line);border-radius:8px;padding:40px 22px;text-align:center} .done2 .tk{width:56px;height:56px;border-radius:50%;background:var(--ok-w);color:var(--ok);display:grid;place-items:center;font-size:28px;margin:0 auto 14px} .chkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:6px 14px} .chkgrid label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer} .chkgrid input{accent-color:var(--navy);width:16px;height:16px} /* ── sold/rented stamp on card photos ── */ .stamp{position:absolute;top:14px;inset-inline-start:-34px;transform:rotate(-32deg); background:var(--danger);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em; padding:5px 44px;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.25);text-transform:uppercase} .stamp.stamp-r{background:var(--gold);color:#1A1206} [dir="rtl"] .stamp{transform:rotate(32deg)} /* ── member level badges ── */ .lvl{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:20px; vertical-align:middle;white-space:nowrap;letter-spacing:.02em} .lvl-trusted{background:var(--ok-w);color:var(--ok)} .lvl-vip{background:var(--gold-w);color:#8A6522} .lvl-partner{background:var(--navy-w);color:var(--navy)} .lvl-silver{background:#eef0f2;color:#5b6572} .lvl-gold{background:#fdf3d8;color:#92700f} .lvl-trusted_agency{background:#eae5fb;color:#5233a8} /* ── admin: badge picker (pill buttons instead of a bare