in the flow and can peek through. Hide it + lock body scroll in map mode. List mode re-enables these via the .list-mode class toggled by JS on . */ body:not(.list-mode) { overflow: hidden !important; } body:not(.list-mode) footer { display: none !important; } /* List mode: restore footer and scrolling */ body.list-mode { overflow-y: auto !important; margin-top: clamp(132px, 14vw, 168px) !important; padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px)); background: var(--W); } body.list-mode footer { display: block !important; } /* Avoid clipping list shell / shadows; map mode keeps main overflow hidden */ body.list-mode main { overflow: visible !important; } body.list-mode #root > div.min-h-screen { padding-bottom: 2rem; background: var(--W) !important; } /* Main content area should respect max-width */ body > #root > div > main { max-width: 100%; } /* Header should respect max-width */ body > #root > div > header { max-width: 100%; } /* Footer should break out and take full width like home page */ body > #root > div > footer { max-width: 100vw !important; width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; position: relative; left: 0; right: 0; } /* ─────────── MAP CHROME: top bars + carousel (below site header only)) ─────────── */ #hdr { position: absolute; left: 0; right: 0; top: 0; z-index: 25; flex-shrink: 0; background: transparent; border-bottom: none; padding: 12px 16px 0; pointer-events: none; } #hdr * { pointer-events: auto; } /* Wrapper for mobile toolbar card — inert on desktop */ .hdr-bar-mobile-shell { width: 100%; max-width: 100%; box-sizing: border-box; } /* Toolbar always follows design L→R: segment | listing type | filter (even on RTL pages). */ .hdr-bar { display: flex; justify-content: center; align-items: center; max-width: 100%; margin: 0 auto; width: 100%; direction: ltr; unicode-bidi: isolate; } .hdr-bar__top-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.84); box-shadow: 0 10px 32px rgba(28, 24, 41, 0.18); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .hdr-bar__kind { display: flex; align-items: center; gap: 2px; padding: 0; border-radius: 999px; background: #fff; border: 1px solid rgba(220, 216, 233, 0.95); } html[dir="rtl"] .hdr-bar__kind { direction: rtl; justify-content: flex-start; /* Arabic: start chips from the right edge */ } .hdr-bar__kind-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--T); font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } /* * Listing-type chips: DOM is [svg][label]. Parent `.hdr-bar__kind` is `direction: rtl`. * Use normal `flex-direction: row` so the first item (icon) sits at main-start = inline-end (right). * `row-reverse` was forcing the icon to the wrong side for most buttons. */ html[dir="rtl"] .hdr-bar__kind-btn { flex-direction: row; } /* Toolbar is `direction: ltr`; give property-type + filter their own RTL inline axis */ html[dir="rtl"] .hdr-bar__pt-wrap { direction: rtl; } html[dir="rtl"] .hdr-bar__filter { direction: rtl; flex-direction: row; } .hdr-bar__kind-btn .hdr-ic, .hdr-bar__kind-btn svg.hdr-ic { flex-shrink: 0; width: 15px; height: 15px; opacity: .85; } .hdr-bar__kind-btn.on { background: var(--P); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); } .hdr-bar__kind-btn.on .hdr-ic { color: #fff; opacity: 1; } /* Map / List: single toggle — label shows destination (List while on map, Map while on list) */ .hdr-bar__view-wrap { flex: 0 0 auto; display: flex; align-items: center; } .hdr-bar__view-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 14px; margin: 0; border-radius: 999px; border: 1px solid rgba(107, 91, 149, 0.28); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 246, 252, 0.96) 100%); color: var(--PD); font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(28, 24, 41, 0.08); white-space: nowrap; flex-shrink: 0; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .hdr-bar__view-toggle:hover { border-color: rgba(107, 91, 149, 0.45); box-shadow: 0 4px 14px rgba(28, 24, 41, 0.1); } .hdr-bar__view-toggle:active { transform: scale(0.98); } .hdr-bar__view-toggle:focus-visible { outline: 2px solid var(--P); outline-offset: 2px; } .hdr-bar__view-toggle-ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; color: var(--P); } .hdr-bar__view-toggle-svg { width: 16px; height: 16px; display: block; } .hdr-bar__view-toggle-text { flex-shrink: 0; } body.list-mode .hdr-bar__view-toggle { border-color: rgba(226, 223, 236, 0.98); background: var(--W); box-shadow: 0 1px 4px rgba(28, 24, 41, 0.06); } /* View switch: subtle motion (honors .ml-view-anim on body) */ @keyframes ml-list-reveal { from { opacity: 0.35; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes ml-map-reveal { from { opacity: 0.55; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } } body.ml-view-anim.list-mode #cp { animation: ml-list-reveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } body.ml-view-anim:not(.list-mode) #mapArea { animation: ml-map-reveal 0.4s ease-out both; } @media (prefers-reduced-motion: reduce) { body.ml-view-anim.list-mode #cp, body.ml-view-anim:not(.list-mode) #mapArea { animation: none !important; } } /* Property type — pill trigger + custom dropdown (native was broken). */ #fov.on { transform: none; } .fhd { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 16px; border-bottom: 1px solid var(--BR); background: var(--W); } .fhd-t { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--T) } .fcls { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--BR); background: none; cursor: pointer; font-size: 14px; color: var(--M); display: flex; align-items: center; justify-content: center; transition: all .15s } .fcls:hover { border-color: var(--P); color: var(--P) } .fbody { flex: 1; overflow-y: auto; /* Reserve space so a scrollbar appearing doesn’t narrow the row and “shrink” the dropdowns */ scrollbar-gutter: stable; padding: 4px 20px 28px; -webkit-overflow-scrolling: touch; } @supports not (scrollbar-gutter: stable) { .fbody { overflow-y: scroll; } } .fbody::-webkit-scrollbar { width: 3px } .fbody::-webkit-scrollbar-thumb { background: var(--BR); border-radius: 3px } .fsec { margin-top: 22px } .flbl { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .6px; text-transform: uppercase; color: var(--F); margin-bottom: 10px } /* Two-column row for All Types + City dropdowns */ .fdr-row { display: flex; gap: 12px; } .fdr-col { flex: 1; min-width: 0; } /* City, District, Property type — one row, equal thirds */ .fdr-row--filters3 { gap: 10px; } .fdr-row--filters3 .fdr-col { flex: 1 1 0; min-width: 0; } .fdr-col .flbl { margin-bottom: 8px; } /* City/type select inside filter overlay */ .fcity-sg { margin-top: 2px; } /* Custom dropdown (Property type + City): full-width panel, matches district picker */ #fov .map-filter-select { position: relative; width: 100%; min-width: 0; } #fov .map-filter-select__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; white-space: nowrap !important; } #fov .map-filter-select__trigger { width: 100%; /* Lock outer box: auto height + vertical padding caused subpixel shifts; match district (44px) */ height: 44px; min-height: 44px; max-height: 44px; margin: 0; border: 1.5px solid var(--BR); border-style: solid; border-radius: 10px; padding: 0 28px 0 30px; font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: var(--fw-medium); color: var(--T); text-align: start; background-color: var(--BG); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b5d8b'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; /* Instant border — animated border-color reads as “fluctuation” on click */ transition: none; outline: none; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; } /* Native