/* ==========================================================================
   ui.css: visual QA fixes (audit/ui.md, 6 Nov 2026). Loaded after every other stylesheet.
   Numbers in the section headings match the audit list.
   ========================================================================== */

/* ---- 2. header: keep the CTA inside the header pill at every desktop width and in Russian */
@media (min-width: 1181px) and (max-width: 1599.98px) {
  .hdr__tel span { display: none; }
  .hdr__tel { padding: 0 !important; width: 40px; justify-content: center; }
}
@media (min-width: 1181px) {
  .hdr__in { min-width: 0; }
  .hdr__cta { flex-shrink: 0; }
  html[lang="ru"] .hdr .nav__a { padding-left: 8px !important; padding-right: 8px !important; font-size: 13.5px; }
  html[lang="ru"] .hdr .prefs__btn span[data-prefs-label] { display: none; }
  html[lang="ru"] .hdr__list i { display: none; }
  html[lang="ru"] .hdr__cta { gap: 10px; }
}
/* the header pill stops growing at 1400px, so the phone number only fits with slightly tighter nav items */
@media (min-width: 1600px) { html:not([lang="ru"]) .hdr .nav__a { padding-left: 12px; padding-right: 12px; } }
@media (min-width: 1181px) and (max-width: 1320px) {
  html[lang="ru"] .hdr .nav__a { padding-left: 6px !important; padding-right: 6px !important; font-size: 13px; }
  html[lang="ru"] .hdr .btn.hdr__list { padding-inline: 14px; }
}

/* ---- 3. phones: one bottom bar only. The app tab bar already carries WhatsApp, so the home "dock" stays hidden */
@media (max-width: 767.98px) {
  body.has-tabbar .lx-dock { display: none !important; }
  body.has-tabbar:has(.lx-dock) .ft2 { padding-bottom: calc(28px + var(--tab-h) + var(--sab)); }
}

/* ---- 4. Arabic: English titles, descriptions and quotes keep their own direction; numbers and units stay together */
html[dir="rtl"] :is(.card__title, .card__loc, .pdp__title, .pdp__tagline, .prose)[dir="auto"] { text-align: right; }
html[dir="rtl"] blockquote, html[dir="rtl"] .pdp__loc a, html[dir="rtl"] .card__pl span { unicode-bidi: plaintext; }
html[dir="rtl"] .pdp__loc a { unicode-bidi: isolate; }
html[dir="rtl"] .card__specs li, html[dir="rtl"] .pdp__specs b, html[dir="rtl"] [data-sqft], html[dir="rtl"] [data-psf] { unicode-bidi: isolate; }
html[dir="rtl"] .card__specs li:not(.muted), html[dir="rtl"] .grid > .card .card__specs li:not(.muted) { display: inline-flex; align-items: center; direction: rtl; }
@media (min-width: 768px) { html[dir="rtl"] .card__specs li.muted { display: inline-flex; align-items: center; direction: rtl; } }
html[dir="rtl"] .card__specs li + li::before { flex: none; }
html[dir="rtl"] .card__specs li:is([data-sqft], [data-psf]) { direction: ltr !important; flex-direction: row-reverse; }

/* ---- 18. right-to-left arrows: the pager chevrons point the reading direction (text arrows are swapped in i18n_html) */
.pager a:has(.pager__ar) { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pager__ar { font-style: normal; display: inline-flex; }
.pager__ar svg { display: block; }
[dir="rtl"] .pager__ar { transform: scaleX(-1); }
[dir="rtl"] .hdr__list:hover i { transform: translateX(-3px); }

/* ---- 5. phone tables: each row becomes a two-line card so the price is always on screen */
@media (max-width: 600px) {
  .tx-table thead, .lsx__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tx-table, .tx-table tbody, .lsx__t table, .lsx__t tbody { display: block; width: 100%; }
  .table-wrap:has(> .tx-table), .lsx__t { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .tx-table tbody tr, .lsx__t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
  .tx-table td, .lsx__t td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .tx-table td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-weight: 500; }
  .tx-table td { text-align: start; }
  .tx-table--deals td:is(:nth-child(4), :nth-child(5), :nth-child(6)), .tx-table--areas td:is(:nth-child(3), :nth-child(4)), .tx-recent .tx-table td:nth-child(3) { text-align: end; }
  /* every deal: property | price, date | AED/sqft, type | size */
  .tx-table--deals td:nth-child(2) { grid-area: 1 / 1; text-align: start; }
  .tx-table--deals td:nth-child(5) { grid-area: 1 / 2; }
  .tx-table--deals td:nth-child(1) { grid-area: 2 / 1; font-size: 13px; color: var(--muted); }
  .tx-table--deals td:nth-child(6) { grid-area: 2 / 2; font-size: 13px; }
  .tx-table--deals td:nth-child(3) { grid-area: 3 / 1; font-size: 13px; text-align: start; }
  .tx-table--deals td:nth-child(3) small { display: inline; margin: 0; margin-inline-start: 6px; }
  .tx-table--deals td:nth-child(4) { grid-area: 3 / 2; font-size: 13px; }
  .tx-table--deals th:nth-child(n), .tx-table--deals td:nth-child(n) { display: block; }
  /* where the money is moving: community | total value, deals | median AED/sqft */
  .tx-table--areas td:nth-child(1) { grid-area: 1 / 1; }
  .tx-table--areas td:nth-child(3) { grid-area: 1 / 2; font-weight: 700; }
  .tx-table--areas td:nth-child(2) { grid-area: 2 / 1; font-size: 13px; text-align: start; }
  .tx-table--areas td:nth-child(4) { grid-area: 2 / 2; font-size: 13px; }
  .tx-table--areas td:nth-child(5), .tx-table--areas .tx-spark { display: none; }
  /* sold prices on area and building pages: building | price, date */
  .tx-recent .tx-table td:nth-child(2) { grid-area: 1 / 1; text-align: start; }
  .tx-recent .tx-table td:nth-child(3) { grid-area: 1 / 2; }
  .tx-recent .tx-table td:nth-child(1) { grid-area: 2 / 1; font-size: 13px; color: var(--muted); }
  /* listing "what sold / rented nearby": price or rent | per sqft or contract, then date · beds · size */
  .lsx__t { border-radius: 18px; padding: 0 14px; }
  .lsx__t tbody tr { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 0; }
  .lsx__t tbody tr:first-child { border-top: 0; }
  .lsx__t tbody tr:last-child { border-bottom: 0; }
  .lsx__t td:nth-child(4) { grid-area: 1 / 1 / 2 / 4; font-size: 16px; }
  .lsx__t td:nth-child(5) { grid-area: 1 / 4; text-align: end; align-self: center; font-size: 13px; }
  .lsx__t td:nth-child(1), .lsx__t td:nth-child(2), .lsx__t td:nth-child(3) { grid-row: 2; font-size: 13px; color: var(--muted); white-space: nowrap; }
  .lsx__t td:nth-child(2):not(:empty)::before, .lsx__t td:nth-child(3):not(:empty)::before { content: "·"; margin: 0 6px; }
}

/* ---- 17. /transactions on phones: stat values on one line, chart labels readable, six month ticks */
.tx-kpis dd { white-space: nowrap; }
@media (max-width: 600px) {
  .tx-kpis { gap: 8px; }
  .tx-kpis div { padding: 16px; min-width: 0; }
  .tx-kpis dd { font-size: clamp(20px, 6.4vw, 26px); letter-spacing: -.03em; }
  .tx-kpis dt { font-size: 11px; letter-spacing: .08em; }
  .tx-chart svg { margin-top: 8px; }
  .tx-chart .tx-ax { font-size: 34px; }
  .tx-chart text.tx-ax:nth-of-type(2n) { display: none; }
  .tx-chart .tx-end { font-size: 38px; transform: translateY(-26px); paint-order: stroke; stroke: #fff; stroke-width: 10px; stroke-linejoin: round; }
  .tx-chart .tx-line { stroke-width: 6; }
  .tx-chart .tx-dot { r: 7; stroke-width: 4; }
  .tx-chart .tx-dot--end { r: 11; }
  .tx-chart .tx-grid-l { stroke-width: 2; }
}

/* ---- 16. listing title: the same H1 (SEO title, tagline below) in the same sans face on every screen size */
.page-listing .pdp__title { font-family: inherit; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
@media (max-width: 767.98px) { .page-listing .pdp__title { font-size: 27px; } }
html[lang="ar"] .page-listing .pdp__title { letter-spacing: 0; }

/* ---- 6. agent "Where X works": a bento chosen by how many communities there are, so the grid never leaves holes */
@media (min-width: 1001px) {
  .agc__g--n2 { grid-template-columns: 3fr 2fr; grid-auto-rows: 420px; }
  .agc__g--n2 > .agc__c { grid-column: auto; grid-row: auto; }
  .agc__g--n3 > .agc__c:not(.agc__c--big), .agc__g--n4 > .agc__c:nth-child(2) { grid-column: span 2; }
}
@media (min-width: 561px) and (max-width: 1000px) {
  .agc__g--n2 > .agc__c--big, .agc__g--n4 > .agc__c--big { grid-column: span 1; grid-row: span 1; }
  .agc__g--n3 > .agc__c--big, .agc__g--n5 > .agc__c--big { grid-column: span 2; grid-row: span 1; }
}

/* ---- 8. footer nav cards: a darker veil behind the text, solid white titles, number on a solid chip */
.ft2-card__top::after { background: linear-gradient(0deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.78) 45%, rgba(8,8,10,.42) 100%); }
.ft2-card__top b { color: #fff; -webkit-text-fill-color: #fff; background: none; opacity: 1; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.ft2-card__top em { color: rgba(255,255,255,.88); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.ft2-card__top small { background: #c8261c; color: #fff; }

/* ---- 9. home "Signature collection": a scrim behind the text block so white type reads on bright photos */
@media (min-width: 768px) {
  .lx-sig__body { padding-top: clamp(60px, 7vw, 110px); background: linear-gradient(0deg, rgba(8,8,10,.9) 0%, rgba(8,8,10,.72) 55%, rgba(8,8,10,0) 100%); }
  .lx-sig__body :is(h3, .lx-sig__loc, .lx-sig__meta) { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
  .lx-sig__meta span { color: rgba(255,255,255,.9); }
}

/* ---- 11. building pages with little data: the hero photo shows without motion too, a lone stat does not stretch */
@media (prefers-reduced-motion: reduce) { .bdx__bg img:first-child { opacity: 1; animation: none; } }
html[data-motion="off"] .bdx__bg img:first-child { opacity: 1; animation: none; }
.bdx__stats:has(> div:only-child) { grid-template-columns: minmax(0, 360px); }

/* ---- 13. /market/rental-index: summary strip, even columns, a heat tint and dashes for gaps */
.ri-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 24px; }
.ri-sum div { padding: 16px 18px; border-radius: 18px; background: #f7f3ee; display: grid; gap: 4px; min-width: 0; }
.ri-sum dt { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ri-sum dd { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.ri-sum small { color: var(--muted); font-size: 12.5px; }
.ri-sum small span { white-space: nowrap; }
.ri-wrap { overflow-x: auto; max-width: 100%; margin-bottom: 16px; }
.mtable--ri { table-layout: fixed; min-width: 640px; font-variant-numeric: tabular-nums; }
.mtable--ri .ri-c1 { width: 30%; }
.mtable--ri td:nth-child(4) { width: auto; }
.mtable--ri th:not(:first-child), .mtable--ri td:not(:first-child) { text-align: end; }
.mtable--ri td:first-child { white-space: normal; }
.mtable--ri td[style] { background: rgba(214, 48, 39, calc(.03 + var(--h, 0) * .16)); font-weight: 600; }
.mtable--ri .ri-na { color: #b9b4ad; }
@media (max-width: 600px) {
  .ri-sum { grid-template-columns: 1fr 1fr; }
  .ri-sum div { padding: 14px; }
  .mtable--ri { min-width: 560px; }
  .mtable--ri .ri-c1 { width: 132px; }
  .mtable--ri th:first-child, .mtable--ri td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--bg, #fff); box-shadow: 1px 0 0 var(--line); }
  .ri-wrap { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  [dir="rtl"] .ri-wrap { -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent); mask-image: linear-gradient(270deg, #000 88%, transparent); }
}

/* ---- 14. 404: ink heading, a search box and the most useful links */
.nf404 .empty { padding-bottom: 96px; }
.nf404 .ph__h { color: var(--ink); }
.nf404 .lead { color: var(--ink-2, #4a4a52); max-width: 560px; }
.nf404__q { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; padding: 6px 6px 6px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 20px 50px -30px rgba(13,13,15,.35); color: var(--muted); }
[dir="rtl"] .nf404__q { padding: 6px 18px 6px 6px; }
.nf404__q input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.nf404__q:focus-within { border-color: var(--ink); }
.nf404__q .btn { flex: none; min-height: 48px; }
.nf404__k { margin: 40px 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nf404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin: 0 auto; }
.nf404__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none; transition: border-color .2s, background .2s; }
.nf404__links a:hover { border-color: var(--ink); }
.nf404__links a span { color: var(--red); }

/* ---- 15. /off-plan: 12 projects at a time, and a lone last card sits centred instead of leaving a hole */
.pgrid > [hidden] { display: none !important; }
.pmore { display: flex; justify-content: center; margin-top: 36px; }
.pmore[hidden] { display: none; }
.pmore__n { color: var(--muted); font-weight: 600; }
@media (min-width: 1001px) {
  .pgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pgrid > * { grid-column: span 2; }
  .pgrid > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
  .pgrid > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  .pgrid > :last-child:nth-child(3n+2) { grid-column: 4 / span 2; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pgrid > * { grid-column: span 2; }
  .pgrid > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
/* developers we work with: logos wrap centred, so a short last row does not hang off the left */
.opx-devs__g { display: flex; flex-wrap: wrap; justify-content: center; }
.opx-devs__g > * { flex: 0 1 calc((100% - 5 * 12px) / 6); min-width: 150px; }
@media (max-width: 600px) { .opx-devs__g > * { flex-basis: calc((100% - 12px) / 2); min-width: 0; } }

/* ---- 12. phone tap targets: 44px for the controls the app layer did not cover */
@media (max-width: 767.98px) {
  .hdr .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .hdr .prefs__btn { height: 44px; }
  .ft2-card__links a, .ft2-bot__links a, .chips a, .area-links a, .opx__chips a, .ct2-adv__btns a, .nb__map a, .nb__tabs button,
  .ct2-intent button, .search__tabs button, .tm-seg > *, .fchips .fchip, .view-toggle button, .lx-review__more, .pdp__sec .link-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .ft2-soc a, .tx-pages a, .rcta__stars button, .lnav__b { min-width: 44px; min-height: 44px; }
  .card__enq, .tel__cc, .ft2-news__row input, .ft2-news__row button, .fsel select { min-height: 44px; }
  .btn, .btn.btn--sm { min-height: 44px; }
  .link-arrow { min-height: 44px; }
  .pulse__bar { min-height: 44px; }
  .a11y-pp, .a11y-mq > .a11y-pp { width: 44px; height: 44px; }
  .a11y-mq > .a11y-pp { margin-top: -22px; }
  /* text links in lists and cards: a taller hit area without moving anything */
  .smx li a, .tx-table a, .crumbs a, :is(.potw__b, .hm-rc__b, .lx-adv__b) h3 > a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .mg-f > input[type=range][type] { height: 44px; margin-block: 0; }
  .tm-card__btns > a, .tm-langs button, .pbar__t a, .ab-voice__adv, .lxh__nav a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* sliders: a 32px tall hit area around the thin visible track, bigger thumbs */
  .mg-f input[type=range], .yl-f input[type=range], .iv-f input[type=range], .pt-f input[type=range], .hz-est__tool input[type=range] {
    height: 32px; margin-block: 6px 0; background-size: 100% 6px; background-position: center; background-repeat: no-repeat; background-color: transparent; }
  .mg-f input[type=range]::-webkit-slider-thumb, .yl-f input[type=range]::-webkit-slider-thumb, .iv-f input[type=range]::-webkit-slider-thumb, .pt-f input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; }
  .calc__in input[type=range] { height: 44px; }
}

/* ---- smaller notes from the audit */
/* headings never leave a single word on the last line (/client-reviews "Clients say / it / better.") */
h1, .ph__h, .h2 { text-wrap: balance; }
/* /about-us timeline: titles wrap inside the part of a card that peeks in from the edge */
.ab2-tl__i h3 { max-width: 250px; text-wrap: balance; }
/* /developers/<slug>: the drop cap sits against its word */
.dvs__lead::first-letter { padding: .06em 0 0 0; margin-right: .03em; }
[dir="rtl"] .dvs__lead::first-letter { float: right; margin-right: 0; margin-left: .02em; }

/* ---- no sideways scroll at 320px: sitemap search bar and columns, client-reviews wall */
.smx__s { min-width: 0; flex-basis: min(360px, 100%); }
.smx__s input { min-width: 0; }
.smx__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.smx__cols li { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .smx__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .smx__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rv2-hero__in > * { min-width: 0; }
.rv2-cols { max-width: 100%; }
.rv2-cloud button { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 400px) { .rv2-cloud button { font-size: min(calc(26px * var(--s)), 34px); } }
/* right-to-left phone table cards: "4,171 sqft" and "AED / sqft 1,175" read left to right inside their cell */
@media (max-width: 600px) {
  html[dir="rtl"] .tx-table--deals td:is(:nth-child(4), :nth-child(5), :nth-child(6)), html[dir="rtl"] .tx-table--areas td:is(:nth-child(3), :nth-child(4)), html[dir="rtl"] .tx-recent .tx-table td:nth-child(3) { direction: ltr; text-align: left; }
  html[dir="rtl"] .lsx__t td:nth-child(3), html[dir="rtl"] .lsx__t td:nth-child(4) { unicode-bidi: isolate; }
}