/**
 * Off-plan projects archive: additions to the /properties/ system only.
 * Everything else (hero, chips, filter bar, cards, pagination, map box) comes
 * from oplus-ds.css + oplus-type.css, so this page reads as the same site.
 */

/* Search + five filters in one bar. */
.pxa .tx-bar__form--search { grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(0, 1fr)); grid-auto-flow: row; }

/* Card: developer line under the location; brochure beside WhatsApp. */
.pxa .tx-card__where + .pxa-dev { margin-block-start: 4px; }
.pxa-acts { display: flex; gap: var(--o-s-2); margin-inline-start: auto; flex: none; }
.pxa .pxa-br { cursor: pointer; font: inherit; background: var(--o-surface); } /* a <button>: Houzez greys buttons by default */
.pxa .pxa-br .o-i { color: var(--o-brand-600); }

/* Map of communities inside the shared map box. */
.pxa-pin { display: grid; place-items: center; inline-size: 38px; block-size: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--o-ink); color: #fff; font: 800 13px/1 var(--o-font); font-variant-numeric: tabular-nums; box-shadow: 0 3px 10px rgba(19, 38, 28, 0.28); cursor: pointer; transition: transform var(--o-t-fast) var(--o-ease), background-color var(--o-t-fast) var(--o-ease); }
.pxa-pin:hover, .pxa-pin:focus-visible { transform: scale(1.1); background: var(--o-brand-600); outline: none; }
.pxa-pin.is-on { inline-size: 46px; block-size: 46px; margin: -23px 0 0 -23px; background: var(--o-brand-600); font-size: 15px; }
.pxa .leaflet-tooltip { font: 600 13px/1.3 var(--o-font); color: var(--o-ink); border-radius: var(--o-r-sm); }

/* Browse by emirate: links to the landing pages. */
.pxa-browse { border-block-start: 1px solid var(--o-line); }
.pxa-browse__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--o-s-8) var(--o-s-10); margin-block-start: var(--o-s-6); }
.pxa-browse__col h3 { font-size: var(--o-fs-lg); font-weight: 800; padding-block-end: var(--o-s-2); border-block-end: 2px solid var(--o-ink); }
.pxa .pxa-browse__col h3 a { color: var(--o-ink); text-decoration: none; }
.pxa .pxa-browse__col h3 a:hover, .pxa .pxa-browse__col li a:hover { color: var(--o-brand-700); text-decoration: underline; }
.pxa-browse__col ul { list-style: none; margin: 0; padding: 0; }
.pxa-browse__col li { display: flex; justify-content: space-between; gap: var(--o-s-3); padding: 9px 0; border-block-end: 1px solid var(--o-line); font-size: var(--o-fs-sm); }
.pxa .pxa-browse__col li a { color: var(--o-ink); text-decoration: none; }
.pxa-browse__col .o-num { color: var(--o-muted); font-weight: 600; }
.pxa-browse__col a[aria-current="page"] { color: var(--o-brand-700); font-weight: 700; }

/* About off-plan + the offer form. */
.pxa-info { border-block-start: 1px solid var(--o-line); }
.pxa-info__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: var(--o-s-12); align-items: start; }
.pxa .pxa-info__p { margin-block-start: var(--o-s-4); max-width: 66ch; line-height: var(--o-lh-body); color: var(--o-text); }
.pxa-points { margin: var(--o-s-8) 0 0; display: grid; gap: var(--o-s-5); }
.pxa-points div { padding-inline-start: var(--o-s-5); border-inline-start: 1px solid var(--o-brand-600); }
.pxa-points dt { font-weight: 800; color: var(--o-ink); }
.pxa-points dd { margin: var(--o-s-1) 0 0; color: var(--o-text); }
.pxa-offer { display: grid; gap: var(--o-s-4); padding: var(--o-s-8); border: 1px solid var(--o-line); border-radius: var(--o-r-lg); background: var(--o-surface); box-shadow: var(--o-shadow-2); }
.pxa-offer__t { font-size: var(--o-fs-xl); font-weight: 800; color: var(--o-ink); }
.pxa-offer__s { color: var(--o-text); margin-block-start: calc(-1 * var(--o-s-2)); }
.pxa .o-field { display: grid; gap: 6px; }
.pxa .o-input {
	inline-size: 100%; min-block-size: 48px; padding: 10px var(--o-s-3);
	border: 1px solid var(--o-line-strong); border-radius: var(--o-r-md); background: var(--o-surface);
	font: 500 var(--o-fs-md)/1.4 var(--o-font); color: var(--o-ink); caret-color: var(--o-brand-600);
}
[dir="rtl"] .pxa .o-input { font-family: var(--o-font-ar); }
.pxa .o-input:focus { outline: 3px solid var(--o-brand-100); border-color: var(--o-brand-600); }
.pxa-check { display: flex; gap: var(--o-s-2); align-items: flex-start; font-size: var(--o-fs-sm); color: var(--o-text); }
.pxa-check input { margin-block-start: 3px; inline-size: 18px; block-size: 18px; accent-color: var(--o-brand-600); }
.pxa-msg { font-size: var(--o-fs-sm); color: var(--o-brand-700); }
.pxa-msg:empty { display: none; }
.pxa-msg.is-error { color: var(--o-danger); }

/* Brochure dialog. */
.pxa-dlg { border: 0; padding: 0; inline-size: min(460px, calc(100% - 24px)); border-radius: var(--o-r-lg); box-shadow: 0 24px 80px rgba(19, 38, 28, 0.32); color: var(--o-text); }
.pxa-dlg::backdrop { background: rgba(20, 38, 28, 0.55); }
.pxa-dlg__form { display: grid; gap: var(--o-s-4); padding: var(--o-s-6); }
.pxa-dlg__ask { display: grid; gap: var(--o-s-4); }
.pxa-dlg__ask[hidden], .pxa-dlg__done[hidden] { display: none; }
.pxa-dlg__head { display: flex; justify-content: space-between; align-items: center; gap: var(--o-s-4); }
.pxa-dlg__head h2 { font-size: var(--o-fs-xl); font-weight: 800; color: var(--o-ink); }
.pxa-dlg__x { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: var(--o-r-md); background: var(--o-surface-2); color: var(--o-ink); cursor: pointer; }
.pxa-dlg__x .o-i { inline-size: 20px; block-size: 20px; }
.pxa-dlg__p { color: var(--o-muted); font-size: var(--o-fs-sm); margin-block-start: calc(-1 * var(--o-s-2)); }
.pxa-dlg__done { display: grid; gap: var(--o-s-4); }

@media (max-width: 1100px) {
	.pxa .tx-bar__form--search { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pxa .tx-bar__field--q { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.pxa-info__grid { grid-template-columns: 1fr; gap: var(--o-s-8); }
	.pxa-offer { padding: var(--o-s-6); }
}
@media (max-width: 600px) {
	.pxa .tx-bar__form--search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Seven pagination buttons on one line at 375px. */
	.pxa .tx-pagination .pagination { flex-wrap: nowrap; gap: 6px; }
	.pxa .tx-pagination .page-link { min-width: 40px; padding-inline: 0; }
}