/* DXB responsive layer v1 — phones, foldables, tablets. Additive: loaded LAST (after ui-layer.css v3 / wow.css).
   Content breakpoints:  <=480 (phone) · 481-767 (large phone / small foldable) · 768-1023 (tablet) · >=1024 (desktop)
   plus a fold range 600-720 (unfolded Fold/Flip inner screens) and `horizontal-viewport-segments: 2`
   (dual-screen / spanned foldable: nothing may sit under the hinge).
   Tokens come from ui-layer.css: container 1200, gutters 20/32, cards 18px, controls 44px, ink pills.
   Rules: no fixed widths on containers, min-width:0 on flex/grid children, dvh/svh, env(safe-area-*),
   clamp() type, 16px inputs, 44px targets. Nothing is hidden for good: fold, stack, scroll or collapse.
   Specificity: `html body` prefix, same as ui-layer.css. */

:root {
  --dxb-hit: 44px;
  --dxb-safe-t: env(safe-area-inset-top, 0px);
  --dxb-safe-r: env(safe-area-inset-right, 0px);
  --dxb-safe-b: env(safe-area-inset-bottom, 0px);
  --dxb-safe-l: env(safe-area-inset-left, 0px);
  --dxb-dock-h: 0px;            /* height reserved at page end for the floating action dock */
}
@media (max-width: 992px) { :root { --dxb-header-h: 64px; } }

/* ================= 0. SAFETY: nothing is wider than its box ================= */
/* theme sets body{min-width:320px}: a 280px Galaxy Fold cover screen then scrolls sideways */
html body, html body :is(.t-Body, .t-Body-main, .t-Body-content, .t-Header, .t-Header-branding) { min-width: 0 !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html body :is(img, video, canvas, iframe, svg:not([width])) { max-width: 100%; }
html body :is(.row, .container, .container-max, .t-Region, .t-Region-body, .t-Body-contentInner, .t-Body-content) { min-width: 0; max-width: 100%; }
html body :is(.col, .t-Cards-item, .t-BadgeList-item, .t-Card, .t-Card-wrap, .t-Report, .t-Report-wrap) { min-width: 0; }
html body .t-Body-contentInner :is(h1, h2, h3, h4, p, li, a, td, th, .t-Card-title, .bold-title) { overflow-wrap: break-word; }
html body .t-Body-contentInner :is(.apex-item-text, .text_field) { max-width: 100%; }
html body :is(.oj-chart, .oj-dvtbase, .chart-wrap, [class*="_jet"]) { min-width: 0; max-width: 100%; }

/* ================= 1. TYPE + FORM CONTROLS ================= */
@media (max-width: 767px) {
  /* 16px inputs: iOS Safari zooms the page on focus below 16px */
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px !important; }
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select) { min-height: var(--dxb-hit); }
  /* nothing under 12px */
  html body .t-Body-contentInner :is(small, .sm-text, .t-Report-colHead p, .t-Card-subtitle, .t-BadgeList-label) { font-size: max(12px, 1em); }
  html body .t-Body-contentInner h1 { font-size: clamp(26px, 8vw, 34px); }
  html body .t-Body-contentInner h2 { font-size: clamp(20px, 6vw, 26px); }
}
/* line length on tablets / unfolded foldables */
@media (min-width: 600px) and (max-width: 1023px) {
  html body .t-Body-contentInner :is(.intro-bg p, .article p, .t-Body-contentInner > p) { max-width: 68ch; }
}

/* ================= 2. HEADER (<=992 = phone/tablet drawer mode) ================= */
@media (max-width: 992px) {
  html body #t_Header { background: rgba(255, 255, 255, .98); -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: var(--dxb-safe-t); }
  html body .t-Header-branding {
    display: flex; align-items: center; gap: 12px; position: relative;
    height: var(--dxb-header-h); min-height: var(--dxb-header-h);
    padding: 0 max(var(--dxb-gut), var(--dxb-safe-r)) 0 max(var(--dxb-gut), var(--dxb-safe-l));
    max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none !important; background: transparent;
  }
  html body .t-Header-branding .show-navigation {
    flex: 0 0 var(--dxb-hit); width: var(--dxb-hit); height: var(--dxb-hit); margin: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; background: var(--dxb-ink); color: #fff;
  }
  html body .t-Header-logo { flex: 0 1 auto; min-width: 0; margin: 0; padding: 0; width: auto; }
  html body .t-Header-logo-link img { max-height: 40px; height: 40px; width: auto; max-width: 100%; margin: 0; display: block; }
  html body .t-Header-navBar { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; min-width: 0; position: static; height: 100%; }
  html body .appCTA, html body .appCTA.logged-Y {
    position: static !important; right: auto !important; top: auto !important; margin: 0; flex: 0 0 auto; display: flex; align-items: center;
  }
  html body .appCTA .t-NavigationBar { display: flex; flex-direction: row; margin: 0; padding: 0; align-items: center; }
  html body .appCTA .t-NavigationBar-item { padding: 0; margin: 0; }
  /* sign-in pill: always visible and 44px, label kept (tiny screens: smaller padding, icon + label stay) */
  html body .appCTA .t-NavigationBar-item .t-Button {
    min-height: var(--dxb-hit); height: var(--dxb-hit); padding: 0 16px; font-size: 14px; white-space: nowrap;
    background: var(--dxb-ink) !important; color: #fff !important; border-radius: var(--dxb-r-pill);
  }
  html body .appCTA .t-NavigationBar-item .t-Button-label { display: inline !important; font-size: 14px; }
  html body .appCTA .t-NavigationBar-item.headerAvatar .t-Button { width: var(--dxb-hit); padding: 0; background: transparent !important; }
  html body .appCTA .t-NavigationBar-item.headerAvatar .t-Button img { margin: 0 !important; }

  /* -- drawer: full-height sheet, grouped sections, 44px rows -- */
  html body .navigationMenu {
    position: fixed !important; top: 0; bottom: 0; left: 0 !important; right: auto !important;
    width: min(88vw, 380px); height: 100vh; height: 100dvh; max-height: none;
    background: var(--dxb-surface); border-right: 1px solid var(--dxb-line); box-shadow: var(--dxb-sh-3);
    transform: translateX(-102%); visibility: hidden;
    transition: transform var(--dxb-t-slow) var(--dxb-ease-out), visibility 0s linear var(--dxb-t-slow);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: calc(var(--dxb-safe-t) + 8px) 0 calc(var(--dxb-safe-b) + 16px) var(--dxb-safe-l);
    z-index: 9999; order: 0;
  }
  html body .navigationMenu.show { transform: none; visibility: visible; transition: transform var(--dxb-t-slow) var(--dxb-ease-out), visibility 0s; }
  html body .navigationMenu .close-navigation {
    display: inline-flex !important; align-items: center; justify-content: center; position: sticky; top: 0; margin: 0 8px 0 auto;
    width: var(--dxb-hit); height: var(--dxb-hit); background: var(--dxb-surface-2); border-radius: 50%; z-index: 2; float: right;
  }
  html body .navigationMenu .t-NavigationBar { display: flex; flex-direction: column; flex-wrap: nowrap; margin: 0; padding: 8px 12px 16px; gap: 2px; clear: both; }
  html body .navigationMenu .t-NavigationBar-item { padding: 0; margin: 0; width: 100%; flex: 0 0 auto; border-bottom: 1px solid var(--dxb-line); }
  html body .navigationMenu .t-NavigationBar-item:last-child { border-bottom: 0; }
  html body .navigationMenu .t-NavigationBar-item > .t-Button, html body .navigationMenu .t-NavigationBar-item > a.t-Button {
    width: 100%; min-height: var(--dxb-hit); height: auto; padding: 10px 12px; justify-content: space-between; display: flex; align-items: center;
    background: transparent; border-radius: var(--dxb-r-md); text-align: left; gap: 8px;
  }
  html body .navigationMenu .t-NavigationBar-item .t-Button-label { font-size: 16px; font-weight: 600 !important; color: var(--dxb-ink); flex: 1 1 auto; text-align: left; }
  html body .navigationMenu .t-NavigationBar-item .t-Button-badge { display: none; }
  html body .navigationMenu .t-NavigationBar-item .t-Icon { display: none; }
  html body .navigationMenu .t-NavigationBar-item > .t-Button:active { background: var(--dxb-surface-2); }
  html body .navigationMenu .dxb-acc { padding: 0 0 8px 12px; }
  html body .navigationMenu .dxb-acc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--dxb-line); }
  html body .navigationMenu .dxb-acc li { margin: 0; }
  html body .navigationMenu .dxb-acc a {
    display: flex; align-items: center; min-height: var(--dxb-hit); padding: 8px 14px; font-size: 15px; font-weight: 500; color: var(--dxb-ink-2);
    text-decoration: none; border-radius: 0 var(--dxb-r-md) var(--dxb-r-md) 0; white-space: normal;
  }
  html body .navigationMenu .dxb-acc a:active, html body .navigationMenu .dxb-acc a:focus-visible { background: var(--dxb-surface-2); color: var(--dxb-ink); }
  /* backdrop + header lifts above it while the drawer is open (drawer lives inside the header stacking context) */
  html body.js-navExpanded::after { content: ''; position: fixed; inset: 0; background: rgba(9, 9, 11, .5); z-index: 9990; }
  html body.js-navExpanded #t_Header { z-index: 9995; }
}
@media (max-width: 992px) and (prefers-reduced-motion: reduce) { html body .navigationMenu, html body .navigationMenu.show { transition: none; } }
/* very small phones / Galaxy Fold cover (280): logo shrinks first, pill keeps its label */
@media (max-width: 359px) {
  html body .t-Header-branding { gap: 8px; --dxb-gut: 12px; }
  html body .t-Header-logo-link img { height: 30px; max-height: 30px; }
  html body .appCTA .t-NavigationBar-item .t-Button { padding: 0 12px; font-size: 13px; }
  html body .appCTA .t-NavigationBar-item .t-Button .t-Icon { display: none !important; }
}
/* tablet / small laptop horizontal nav (993-1279): compact so it neither wraps nor clips */
@media (min-width: 993px) and (max-width: 1279px) {
  html body .t-Header-branding { gap: 8px; padding-left: 16px; padding-right: 16px; }
  html body .t-Header-logo-link img { min-height: 36px; max-height: 36px; }
  html body .navigationMenu .t-NavigationBar-item > .t-Button { padding: 0 4px !important; }
  html body .navigationMenu .t-NavigationBar-item .t-Button-label { font-size: 13px; letter-spacing: -.01em; white-space: nowrap; }
  html body .navigationMenu .t-NavigationBar-item .a-Icon.icon-down-arrow { margin-left: 1px; font-size: 10px; width: 10px; }
  html body .appCTA { margin-left: 6px; }
  html body .appCTA .t-NavigationBar-item .t-Button { padding: 0 14px; }
  html body .t-NavigationBar-item .t-Button-badge, html body .t-NavigationBar-item .t-Button-label .badge { white-space: nowrap; }
}
/* mega-menu panels on desktop never run off-screen */
html body .t-NavigationBar-menu.a-Menu { max-width: calc(100vw - 16px); max-height: calc(100dvh - 96px); }

/* ================= 3. FOOTER ================= */
@media (max-width: 767px) {
  html body .t-Footer .t-Cards { padding: 0; margin: 0; }
  html body .t-Footer .t-Cards .t-Cards-item { width: auto; float: none; margin: 0; padding: 0; }
  html body .t-Footer .t-Cards .t-Card-wrap { min-height: var(--dxb-hit); padding: 12px 14px; }
  html body .t-Footer a { display: inline-block; min-height: 32px; line-height: 1.5; padding-block: 6px; }
  html body .t-Footer .t-Card-title { font-size: 15px; line-height: 1.35; }
  html body .t-Footer { padding-left: max(var(--dxb-gut), var(--dxb-safe-l)); padding-right: max(var(--dxb-gut), var(--dxb-safe-r)); }
  html body .t-Footer :is(.t-Footer-content, .container, .t-Footer-body) { padding-left: 0; padding-right: 0; }
  html body .t-Footer .t-Card-desc a { display: flex; align-items: center; min-height: var(--dxb-hit); padding: 6px 0; }
  /* newsletter: one column, full-width field + button, usable at 280px */
  html body :is(.footer-subscribe, .subscribe-bg) { padding-left: var(--dxb-gut); padding-right: var(--dxb-gut); }
  html body :is(.footer-subscribe, .subscribe-bg) :is(form, .row, .t-Form-fieldContainer) { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
  html body :is(.footer-subscribe, .subscribe-bg) .mxw450 { max-width: 100%; width: 100%; }
  html body :is(.footer-subscribe, .subscribe-bg) .subscribeNews { width: 100%; margin: 0 !important; min-height: var(--dxb-hit); justify-content: center; }
  html body .t-Footer .t-Footer-topButton { min-width: var(--dxb-hit); min-height: var(--dxb-hit); }
}


/* ================= 4. FLOATING ACTIONS: one compact dock, safe-area aware ================= */
html body .footer-cta.transaction-floating-actions { max-width: calc(100vw - 16px); }
@media (max-width: 767px) {
  :root { --dxb-dock-h: calc(72px + var(--dxb-safe-b)); }
  /* the page ends above the dock, so it can never cover the last rows / the footer */
  html body .t-Body-contentInner { padding-bottom: var(--dxb-dock-h); }
  html body .footer-cta.transaction-floating-actions {
    left: max(8px, var(--dxb-safe-l)) !important; right: calc(56px + max(8px, var(--dxb-safe-r))) !important; transform: none !important; width: auto;
    bottom: calc(8px + var(--dxb-safe-b)) !important; padding: 4px; gap: 4px; justify-content: space-between; flex-wrap: nowrap;
  }
  html body .footer-cta .btn, html body .footer-cta .pill-btn { flex: 1 1 0; min-width: var(--dxb-hit); padding: 0 8px; font-size: 13px; gap: 6px; height: var(--dxb-hit); white-space: nowrap; }
  /* the round chat/Telegram FAB docks in the SAME row, right of the bar, instead of floating over content */
  html body .telegram { bottom: calc(8px + var(--dxb-safe-b)) !important; right: max(8px, var(--dxb-safe-r)) !important; width: 48px; height: 48px; min-width: 48px; min-height: 48px; z-index: 120; }
  html body a.desk-wapp.hiddenPrint { bottom: calc(8px + var(--dxb-safe-b)) !important; }
}
/* Telegram FAB: ui-layer's brightness(0) on every .desk-wapp svg turned the logo into a solid black disc */
html body .telegram a.desk-wapp.hiddenPrint { background: transparent !important; border: 0 !important; box-shadow: none !important; width: 100%; height: 100%; padding: 0 !important; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; }
html body .telegram a.desk-wapp.hiddenPrint svg { filter: grayscale(1) !important; width: 70%; height: 70%; }
html body .telegram { display: flex; width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
/* floating "Ask" pill (non-transaction pages) sits in the same bottom row as the FAB, never on top of it */
@media (max-width: 767px) {
  html body a.desk-wapp.hiddenPrint:not(.telegram a):not(.footer-cta a) { right: calc(64px + max(8px, var(--dxb-safe-r))) !important; min-height: var(--dxb-hit); }
}
@media (max-width: 359px) {
  html body .footer-cta .btn :is(svg, img), html body .footer-cta .pill-btn :is(svg, img) { display: none; }
}
@media (min-width: 768px) {
  html body .telegram { bottom: calc(18px + var(--dxb-safe-b)); right: calc(14px + var(--dxb-safe-r)); }
}
html body :is(.mobile-filters, .mobile-fixed-btns) { bottom: calc(12px + var(--dxb-safe-b)); }

/* ================= 5. DIALOGS -> bottom sheets on small screens ================= */
@media (max-width: 767px) {
  html body .ui-dialog, html body .ui-dialog.ui-front {
    position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 92vh !important; max-height: 92dvh !important;
    margin: 0 !important; border-radius: var(--dxb-r-lg) var(--dxb-r-lg) 0 0 !important; display: flex; flex-direction: column;
    padding-bottom: var(--dxb-safe-b);
  }
  html body .ui-dialog[style*="display: none"], html body .ui-dialog[style*="display:none"] { display: none !important; }
  html body .ui-dialog .ui-dialog-content { width: auto !important; height: auto !important; max-height: none !important; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding-left: var(--dxb-gut); padding-right: var(--dxb-gut); }
  html body .ui-dialog .ui-dialog-titlebar { flex: 0 0 auto; padding: 12px var(--dxb-gut); min-height: 56px; }
  html body .ui-dialog .ui-dialog-titlebar-close {
    width: var(--dxb-hit); height: var(--dxb-hit); right: 6px; top: 6px; margin: 0; opacity: 1; visibility: visible; display: inline-flex; align-items: center; justify-content: center;
  }
  html body .ui-dialog .t-DialogRegion-buttons, html body .ui-dialog .ui-dialog-buttonpane { padding: 12px var(--dxb-gut) 12px; }
  html body .ui-dialog .t-Button, html body .ui-dialog button { min-height: var(--dxb-hit); }
  /* site modals / auth / cookie / T&C that are not jQuery-UI: any role=dialog panel */
  html body [role="dialog"]:not(.ui-dialog):not(.navigationMenu), html body [aria-modal="true"]:not(.ui-dialog):not(.navigationMenu) {
    max-width: 100vw; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  }
  html body .ui-widget-overlay { position: fixed; inset: 0; }
  /* React modals (SiteModal, AuthModal): inline inset/width/margin are overridden -> bottom sheet, scrollable body, close visible */
  html body [role="dialog"].ui-widget-content {
    position: fixed !important; inset: auto 0 0 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: 92vh !important; max-height: 92dvh !important; border-radius: var(--dxb-r-lg) var(--dxb-r-lg) 0 0 !important;
    padding-bottom: var(--dxb-safe-b); overflow-y: auto !important;
  }
  html body [role="dialog"].ui-widget-content .ui-dialog-titlebar { position: sticky; top: 0; z-index: 3; background: var(--dxb-surface); }
  html body [role="dialog"].ui-widget-content .ui-dialog-titlebar-close { position: absolute; right: 6px; top: 6px; z-index: 4; }
  html body .dxb-auth .t-Dialog-body { padding-left: var(--dxb-gut) !important; padding-right: var(--dxb-gut) !important; }
  html body .dxb-auth-overlay { align-items: flex-end; }
  /* popup LOV pickers (location / developer): full-width bottom sheet; inline top/left/width are overridden */
  html body .a-PopupLOV-dialog {
    position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important;
    max-height: 80vh !important; max-height: 80dvh !important; border-radius: var(--dxb-r-lg) var(--dxb-r-lg) 0 0 !important;
    padding: 12px var(--dxb-gut) calc(12px + var(--dxb-safe-b)) !important; box-shadow: 0 -12px 40px rgba(9, 9, 11, .25);
  }
  html body .a-PopupLOV-dialog .a-PopupLOV-results { max-height: none !important; flex: 1 1 auto; overscroll-behavior: contain; }
  html body .a-PopupLOV-dialog .a-PopupLOV-results button { min-height: var(--dxb-hit); }
  html body .a-PopupLOV-dialog .a-PopupLOV-search { min-height: var(--dxb-hit); }
  html body .a-PopupLOV-dialog button[aria-label="Close"] { min-width: var(--dxb-hit); min-height: var(--dxb-hit); }
}
/* the "Extension install" / cookie popups never exceed the viewport */
html body aside[class*="_popup"] { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
@media (max-width: 767px) {
  html body aside[class*="_popup"] { left: 8px !important; right: 8px !important; bottom: calc(8px + var(--dxb-safe-b)) !important; width: auto !important; }
}

/* ================= 6. SEARCH FORM + FILTER BARS ================= */
html body .searchForm { max-width: 100%; box-sizing: border-box; }
html body .searchForm :is(.container-max, .search-bar-bg, .custom-selectList, .SearchComponent) { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 767px) {
  html body .searchForm { padding-left: var(--dxb-gut); padding-right: var(--dxb-gut); }
  html body .searchForm .container-max { padding-left: 0; padding-right: 0; }
  html body .search-bar-bg { padding: 8px; }
  html body .search-bar-bg :is(.search-choose-btns, .more-filters) { min-height: var(--dxb-hit); min-width: var(--dxb-hit); }
  /* inline popups (Beds / Status / Type / More filters) become sheets that fit the visual viewport */
  html body .inline-popup, html body .more-filter-popup .popup-inner, html body .search-bar-popup .inline-popup {
    max-width: calc(100vw - 2 * var(--dxb-gut)); max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
  }
  html body .more-filter-popup { padding-bottom: var(--dxb-safe-b); }
  html body .popup-pills ul { display: flex; flex-wrap: wrap; gap: 8px; }
  html body .popup-pills ul li { min-height: var(--dxb-hit); display: inline-flex; align-items: center; padding: 0 14px; }
}
/* toolbar pills: ONE scrollable chip row, never a wrapped orphan (Trends alone on row 2) */
@media (max-width: 767px) {
  html body .white-bar .toolbar, html body .white-bar .toolbar > div { flex-wrap: wrap; min-width: 0; }
  html body .tool-pills {
    display: flex !important; flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 100%;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 2px var(--dxb-gut) 2px 2px; margin: 0; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  html body .tool-pills::-webkit-scrollbar { display: none; }
  html body .tool-pills .pill-btn { flex: 0 0 auto; min-height: var(--dxb-hit); padding: 0 16px; font-size: 14px !important; overflow: visible; text-overflow: clip; scroll-snap-align: start; white-space: nowrap; }
  html body .tool-pills .pill-btn svg { display: inline-block !important; }
}
/* segmented radios / chip groups: wrap into rows (never overflow, never clipped into a pill) */
@media (max-width: 767px) {
  html body :is(.apex-item-group--rc, .radio_group) { max-width: 100%; height: auto; overflow: visible; border-radius: var(--dxb-r-md); }
  html body :is(.apex-item-group--rc, .radio_group) .apex-item-grid-row { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  html body :is(.apex-item-group--rc, .radio_group) .apex-item-option { flex: 1 1 auto; min-width: 0; margin: 0; }
  html body :is(.apex-item-group--rc, .radio_group) :is(label.u-radio, label) { min-height: var(--dxb-hit); display: flex; align-items: center; justify-content: center; padding: 6px 12px; white-space: normal; text-align: center; line-height: 1.2; width: 100%; box-sizing: border-box; border-radius: var(--dxb-r-md); }
  html body .market-control-bar .apex-item-grid-row { flex-wrap: wrap !important; gap: 6px; }
  html body .market-control-bar .apex-item-option { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; }
  html body .market-control-bar :is(.apex-item-group--rc, .radio_group) { width: 100% !important; }
  html body .market-control-bar label.u-radio { padding: 6px 12px !important; white-space: nowrap !important; min-height: 40px !important; width: auto !important; font-size: 14px !important; border-radius: var(--dxb-r-md) !important; }
  html body .market-control-bar :is(.t-Region-bodyWrap, .t-Region-body, .t-Form-fieldContainer, .filters-bg) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body .market-control-bar .t-Form-fieldContainer { margin-top: 4px; margin-bottom: 4px; }
  html body .market-control-bar.market-filter-pinned { max-height: 36vh; max-height: 36dvh; padding-left: max(12px, var(--dxb-safe-l)) !important; padding-right: max(12px, var(--dxb-safe-r)) !important; }
  html body .popular-searches .t-MediaList, html body .location-children :is(ul, .pills) { max-width: 100%; }
  /* report filter rows (#filters, .filters-bg, PinnedFilters): wrap, 44px controls */
  html body :is(.filters-bg, #filters, .blackbg, .reportFilters) :is(.t-Form-fieldContainer, .row, .col) { min-width: 0; max-width: 100%; }
  html body :is(.filters-bg, #filters, .blackbg) { padding-left: var(--dxb-gut); padding-right: var(--dxb-gut); }
  html body :is(.filters-bg, #filters, .blackbg) :is(select, input[type="text"], .apex-item-popup-lov) { width: 100%; max-width: 100%; }
}
/* pinned filter bars must clear the dynamic toolbar + keyboard: use dvh and the header height token */
html body #filters.fixedFilters, html body .blackbg.fixedFilters { top: var(--dxb-header-h) !important; max-width: 100vw; }
@media (max-width: 992px) {
  html body #filters.fixedFilters, html body .blackbg.fixedFilters { padding-left: var(--dxb-gut); padding-right: var(--dxb-gut); overflow-x: auto; }
  html body .searchForm.search-stuck { padding-left: var(--dxb-gut); padding-right: var(--dxb-gut); padding-top: calc(var(--dxb-safe-t) + 6px); }
}

/* ================= 7. GRIDS: KPI + cards ================= */
/* KPI/badge grids: 1-col <=480, 2-col 481-1023 (3 where it fits), 3-4 desktop */
html body .t-BadgeList { display: grid; gap: 12px; }
@media (max-width: 480px) {
  html body .t-BadgeList, html body .t-BadgeList.t-BadgeList--fixed, html body .t-BadgeList--large { grid-template-columns: minmax(0, 1fr); }
  html body .t-BadgeList-item .t-BadgeList-wrap { min-height: 0; }
}
@media (min-width: 481px) and (max-width: 1023px) {
  html body .t-BadgeList, html body .t-BadgeList.t-BadgeList--fixed, html body .t-BadgeList--large { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  html body .t-BadgeList--3cols, html body .t-BadgeList--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html body .t-BadgeList-item { float: none; width: auto; margin: 0; }
/* cards (.t-Cards--Ncols): grid with the same ladder */
html body ul.t-Cards:not(.t-Cards--featured):not(.t-Cards--block) { --dxb-c: 3; display: grid; gap: 16px; grid-template-columns: repeat(var(--dxb-c), minmax(0, 1fr)); }
html body ul.t-Cards:not(.t-Cards--featured):not(.t-Cards--block) > .t-Cards-item { width: auto; float: none; margin: 0; padding: 0; max-width: none; }
html body ul.t-Cards.t-Cards--4cols:not(.t-Cards--featured):not(.t-Cards--block), html body ul.t-Cards.t-Cards--5cols:not(.t-Cards--featured):not(.t-Cards--block) { --dxb-c: 4; }
html body ul.t-Cards.t-Cards--2cols:not(.t-Cards--featured):not(.t-Cards--block) { --dxb-c: 2; }
@media (max-width: 1023px) {
  html body ul.t-Cards.t-Cards:not(.t-Cards--featured):not(.t-Cards--block) { --dxb-c: 2; }
}
@media (max-width: 480px) {
  html body ul.t-Cards.t-Cards:not(.t-Cards--featured):not(.t-Cards--block) { --dxb-c: 1; gap: 12px; }
}
/* featured/block cards (developer list etc.): stack on phones, 2-up on unfolded foldables / tablets */
@media (max-width: 767px) {
  html body ul.t-Cards.t-Cards--featured > .t-Cards-item, html body ul.t-Cards.t-Cards--block > .t-Cards-item { width: 100%; float: none; margin-left: 0; margin-right: 0; }
}
/* long lists: collapsed behind "Show all N" on phones (ResponsiveEnhance adds the class + button; nothing is removed) */
@media (max-width: 767px) {
  html body ul.t-Cards.dxb-collapsible.is-collapsed > li:nth-child(n + 7) { display: none; }
  html body .dxb-showall {
    display: flex; align-items: center; justify-content: center; width: calc(100% - 2 * var(--dxb-gut)); margin: 12px var(--dxb-gut) 24px; min-height: var(--dxb-hit);
    border: 1px solid var(--dxb-line-strong); border-radius: var(--dxb-r-pill); background: var(--dxb-surface); color: var(--dxb-ink); font: 600 15px/1 var(--dxb-font); cursor: pointer;
  }
  html body .dxb-showall:active { background: var(--dxb-surface-2); }
}
@media (min-width: 768px) { html body .dxb-showall { display: none; } }

/* developer / agent / project list cards: compact on phones (developers page was 38,577px) */
@media (max-width: 767px) {
  html body .dev-stats-wrap { display: flex; flex-direction: column; gap: 12px; }
  html body .dev-stats-logo-col { display: flex; align-items: center; gap: 12px; }
  html body .dev-stats-logo img { max-height: 44px; width: auto; max-width: 140px; }
  html body .dev-stats-overview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  html body .dev-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html body .dev-stats-card { padding: 10px; min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
  html body .dev-stats-card-icon-wrap { grid-row: 1 / span 2; margin: 0; }
  html body .dev-stats-card-label { margin: 0; font-size: 12px; align-self: end; }
  html body .dev-stats-card-value { align-self: start; font-size: 18px; }
  html body ul.t-Cards .t-Card-titleWrap { padding: 8px 4px; }
  html body ul.t-Cards .t-Card-wrap { padding: 16px; }
}
@media (max-width: 480px) { html body .dev-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= 8. TABLES ================= */
/* Default for every wide table: scroll sideways inside its card, scroll-shadow edges, sticky first column.
   Table cells are never hidden. Stacked row-cards are used only where the markup already provides them
   (transactions report, below). */
@media (max-width: 1023px) {
  html body .t-Body-contentInner table:not(.t-Report-report):not(.dxb-nostack):not(.dxb-stack) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  html body .t-Report-wrap, html body .t-Report.border-container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat local,
      linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(24, 20, 48, .18), rgba(24, 20, 48, 0)) 0 0 / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(24, 20, 48, .18), rgba(24, 20, 48, 0)) 100% 0 / 14px 100% no-repeat scroll,
      var(--dxb-surface);
  }
  html body .t-Report .t-Report-report { min-width: 0; }
  html body .t-Report .t-Report-cell, html body .t-Report .t-Report-colHead { padding: 12px 12px; }
  html body .t-Report td[headers="DETAIL_LINK"] { white-space: normal; }
}
@media (max-width: 767px) {
  html body .t-Report .t-Report-colHead { position: static; }
  html body .t-Report .t-Report-cell, html body .t-Report .t-Report-colHead { white-space: normal; }
  /* readable minimum width for data tables that scroll (never squeezed into unreadable columns) */
  html body .t-Body-contentInner table:not(.t-Report-report):not(.dxb-nostack) :is(th, td) { min-width: 84px; padding: 10px 12px; font-size: 14px; }
  html body .t-Body-contentInner table:not(.t-Report-report) :is(th, td):first-child { position: sticky; left: 0; background: var(--dxb-surface); z-index: 1; box-shadow: 1px 0 0 var(--dxb-line); min-width: 110px; }
  html body .t-Body-contentInner table:not(.t-Report-report) thead th:first-child { z-index: 2; }
  /* big transaction/price numbers fit a phone card */
  html body .t-Report td[headers="TOTAL_PRICE"] > a > div { font-size: 18px; }
}
/* APEX report tables (.t-Report-report) on phones: each row becomes a card that keeps EVERY cell, labelled from its column header
   (ResponsiveEnhance copies the header text into data-label). Transactions tables (#soldhistory/#rentHistory) already have their own card layout. */
@media (max-width: 767px) {
  html body table.dxb-stack, html body table.dxb-stack tbody { display: block; width: 100%; overflow: visible; }
  html body table.dxb-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html body table.dxb-stack tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--dxb-line); }
  html body table.dxb-stack td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; text-align: left !important; position: static !important; box-shadow: none !important; }
  html body table.dxb-stack td:first-child { grid-column: 1 / -1; font-weight: 600; }
  html body table.dxb-stack td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dxb-subtle); margin-bottom: 2px; }
  html body table.dxb-stack td:empty { display: none; }
  html body table.dxb-stack td[headers="TOTAL_PRICE"], html body table.dxb-stack td:last-child:not(:first-child) { text-align: left !important; }
}
/* report tables on small laptops / landscape tablets: scroll inside the card when wider (not the transactions tables: they pin their header) */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body .t-Report-tableWrap { max-width: 100%; overflow-x: auto; }
  html body #soldhistory .t-Report-tableWrap, html body #rentHistory .t-Report-tableWrap { overflow: visible; }
}
@media (min-width: 1024px) {
  html body .t-Body-contentInner table { max-width: 100%; }
}

/* market-controls.css pins these radio groups to one nowrap row of shrinking options: labels overlapped at 360-1023. Let them wrap. */
@media (max-width: 1023px) {
  html body :is(#P100_SWITCH_PRICE_TREND, #P100_YEAR_QTR, #P100_IS_FIRST_1, #P100_COUNT_PERIOD, #P10_SWITCH_PRICE_TREND, #P10_CAT, #P10_IS_FIRST, #P66_PERIOD_FILTER, #P66_IS_FIRST) .apex-item-grid-row { flex-wrap: wrap; gap: 6px; }
  html body :is(#P100_SWITCH_PRICE_TREND, #P100_YEAR_QTR, #P100_IS_FIRST_1, #P100_COUNT_PERIOD, #P10_SWITCH_PRICE_TREND, #P10_CAT, #P10_IS_FIRST, #P66_PERIOD_FILTER, #P66_IS_FIRST) .apex-item-option { flex: 0 0 auto; width: auto; }
  html body :is(#P100_SWITCH_PRICE_TREND, #P100_YEAR_QTR, #P100_IS_FIRST_1, #P100_COUNT_PERIOD, #P10_SWITCH_PRICE_TREND, #P10_CAT, #P10_IS_FIRST, #P66_PERIOD_FILTER, #P66_IS_FIRST) label.u-radio { width: auto; min-height: 40px; padding: 6px 14px !important; white-space: nowrap; }
}

/* ================= 9. CHARTS (Chart.js canvases + JET containers) ================= */
html body :is(.oj-chart, [class*="_jet"] .oj-chart) { width: 100%; max-width: 100%; }
html body :is(.chart-card, .report-card, .jet-card) canvas { max-width: 100%; height: auto; }
@media (max-width: 767px) {
  html body .oj-chart { height: clamp(220px, 62vw, 320px); }
  html body :is(.oj-dvtbase, .chart-card, .jet-card) { overflow: hidden; }
  /* legends wrap under the plot */
  html body :is(.dxb-legend, .chart-legend, [class*="legend"]) { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
  /* chart tooltips never exceed the viewport (ReportTooltip portal) */
  html body :is(.chartjs-tooltip, .dxb-tooltip, [class*="ReportTooltip"]) { max-width: calc(100vw - 16px); }
}

/* ================= 10. MAPS (MapLibre) ================= */
html body .maplibregl-map, html body :is(#map, .map-wrap, .map-container) { max-width: 100%; }
@media (max-width: 767px) {
  html body :is(#map, .map-wrap, .map-container) { width: 100%; min-height: min(70svh, 520px); }
  /* full-bleed on phones: map breaks out of the gutters */
  html body :is(.map-wrap, .map-container, #mapWrap) { margin-left: calc(-1 * var(--dxb-gut)); margin-right: calc(-1 * var(--dxb-gut)); width: calc(100% + 2 * var(--dxb-gut)); border-radius: 0; }
  html body .maplibregl-ctrl-group button { width: var(--dxb-hit); height: var(--dxb-hit); }
  html body .maplibregl-ctrl-bottom-right { bottom: calc(var(--dxb-dock-h) - 8px); }
  html body .maplibregl-popup { max-width: calc(100vw - 32px) !important; }
  html body .maplibregl-popup-content { max-width: calc(100vw - 32px); }
  html body .maplibregl-map { touch-action: pan-x pan-y; }
}

/* ================= 11. TOUCH: targets, no hover-only affordances, :active feedback ================= */
@media (hover: none), (pointer: coarse) {
  html body :is(a.t-Button, button.t-Button, .pill-btn, .search-choose-btns, .more-filters, .popup-pills li, .t-NavigationBar-item .t-Button) { min-height: var(--dxb-hit); }
  html body :is(.t-NavigationBar-menu.a-Menu li a) { min-height: var(--dxb-hit); display: flex; align-items: center; white-space: normal; }
  html body :is(button, a.t-Button, .pill-btn, .t-Cards-item a, .t-Report tr):active { opacity: .86; }
  html body :is(.t-Cards-item .t-Card, .t-MediaList-itemWrap):active { transform: scale(.992); }
  /* hover lifts are decorative: do not leave cards stuck "raised" after a tap */
  html body .t-Cards .t-Cards-item:hover .t-Card { transform: none; }
  /* tooltips / dropdowns that were hover-only also open on focus-within (tap focuses) */
  html body :is(.report-help, [data-tooltip], .has-tooltip):focus-within + :is(.tooltip, .dxb-tooltip) { display: block; }
}
html body :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--dxb-ring); outline-offset: 2px; }

/* ================= 12. TABLET (768-1023) ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  html body .t-Body-contentInner :is(.container-max, .container) { padding-left: var(--dxb-gut); padding-right: var(--dxb-gut); }
  html body .white-bar .toolbar, html body .white-bar .toolbar > div { flex-wrap: wrap; row-gap: 12px; }
  html body .tool-pills { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  html body .tool-pills .pill-btn { flex: 0 0 auto; }
  html body .search-bar-bg { flex-wrap: wrap; }
}

/* ================= 13. FOLDABLES ================= */
/* unfolded inner screens (~600-720): wider two-pane layouts where it helps; same DOM, only the grid changes */
@media (min-width: 600px) and (max-width: 767px) {
  html body .t-BadgeList, html body .t-BadgeList.t-BadgeList--fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body ul.t-Cards.t-Cards--featured > .t-Cards-item { width: calc(50% - 8px); display: inline-block; vertical-align: top; }
  /* report filters beside charts: filter bar becomes a left pane when the page marks it */
  html body .dxb-two-pane { display: grid; grid-template-columns: minmax(200px, 34%) minmax(0, 1fr); gap: var(--dxb-s4); align-items: start; }
  html body .dxb-two-pane > :first-child { position: sticky; top: calc(var(--dxb-header-h) + 8px); }
  html body .footer-cta.transaction-floating-actions { right: calc(64px + var(--dxb-safe-r)) !important; }
}
/* very narrow cover displays (Galaxy Fold 280, Z Fold cover 344) */
@media (max-width: 359px) {
  :root { --dxb-gut: 12px; }
  html body .t-Body-contentInner h1 { font-size: clamp(22px, 8vw, 26px); }
  html body .t-Card-wrap, html body ul.t-Cards .t-Card-wrap { padding: 12px; }
  html body .t-BadgeList-value .counter, html body .area-price .value .counter { font-size: 20px !important; }
}
/* dual-screen / spanned: keep content out of the hinge. env(viewport-segment-*) = the two panes */
@media (horizontal-viewport-segments: 2) {
  html body .t-Body-contentInner { padding-left: 0; padding-right: 0; }
  html body .t-Body-contentInner .container-max { max-width: env(viewport-segment-width 0 0, 100%); margin-left: 0; margin-right: auto; }
  html body #t_Header .t-Header-branding { padding-right: calc(100vw - env(viewport-segment-right 0 0, 100vw) + 12px); }
  html body .footer-cta.transaction-floating-actions { right: auto !important; left: calc(env(viewport-segment-right 0 0, 100vw) - 100% - 16px) !important; max-width: env(viewport-segment-width 0 0, 100%); }
}
@media (vertical-viewport-segments: 2) {
  html body .t-Header-branding { padding-bottom: 0; }
}
/* landscape phones: short viewports — drawer/sheets scroll, dock stays small, header slimmer */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --dxb-header-h: 52px; }
  html body .t-Header-logo-link img { height: 32px; max-height: 32px; }
  html body .ui-dialog { max-height: 100dvh !important; }
  html body .footer-cta.transaction-floating-actions { padding: 2px; }
  html body .footer-cta .btn, html body .footer-cta .pill-btn { height: 40px; }
}

/* ================= 14. TEXT ZOOM / REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
  html body .dxb-showall, html body .navigationMenu { transition: none; }
}