/**
 * Oplus Design System — foundation (v2, 2026-11).
 *
 * The one source of tokens and primitives for every rebuilt Oplus template.
 * The property-type archive is the first consumer; city, project and brand
 * pages migrate onto it as they are rebuilt. Page stylesheets may compose
 * these primitives and add page components, but never redefine a token value.
 *
 * Decisions (and why)
 * -------------------
 * Identity — taken from the live chrome, not invented: brand green #247a3b is
 *   the header CTA (5.35:1 on white), 9–12px radii match the header button and
 *   footer cards, and the dark surface is the footer slate (#2c3e50). A page
 *   built on these tokens reads as the same site as its header and footer.
 *   The logo green #00a651 (3.19:1) is never used for text or white labels. Body text 7.28:1,
 *   muted text ≥ 5.19:1 on every surface it sits on, input borders ≥ 3:1
 *   (WCAG 1.4.11). Every pair was measured, not eyeballed.
 * Style — editorial and quiet: hairline borders, one restrained shadow for
 *   lift, big tabular numerals, photography carries the colour. No glass, no
 *   gradients behind text, no decorative motion.
 * Type — Plus Jakarta Sans (Latin, already the sitewide Houzez font, so no
 *   extra request) + IBM Plex Sans Arabic (Arabic, RTL only). Both have proper
 *   weights 400–700 and tabular figures; the Arabic face has real Arabic
 *   numerals and holds up at small sizes, where Tajawal thins out.
 * Space — 4px base, used through the named steps only.
 * Direction — logical properties throughout, so RTL needs no second sheet.
 * Motion — 150–250ms state changes, one entrance reveal, all of it removed
 *   under prefers-reduced-motion.
 *
 * Scope — tokens on :root (prefixed --o-), primitives as .o-* classes. Nothing
 * here styles a bare element outside an `.o-scope` root.
 */

/*
 * Plus Jakarta Sans loads asynchronously, so the first paint uses a local
 * font. Scaled to Jakarta's measured metrics (avg. width 103–106% of Arial,
 * ascent 1.04 em, descent 0.22 em) so text keeps its line breaks when the
 * web font swaps in — without this, fact rows re-wrapped (CLS 0.09).
 */
@font-face {
	font-family: "Oplus Jakarta Fallback";
	src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
	size-adjust: 104.5%;
	ascent-override: 99.5%;
	descent-override: 21%;
	line-gap-override: 0%;
}

:root {
	/* Brand */
	--o-brand-50: #e9f3ec;
	--o-brand-100: #d3e8da;
	--o-brand-500: #58cc02; /* footer heading accent, dark surfaces only */
	--o-brand-600: #247a3b; /* header CTA */
	--o-brand-700: #1d6330;

	/* Neutrals (green-tinted so greys sit with the brand, not against it) */
	--o-ink: #14261c;
	--o-text: #4a5b52;
	--o-muted: #5d6d65;
	--o-line: #e3e8e5;
	--o-line-strong: #8a978f;
	--o-surface: #ffffff;
	--o-surface-2: #f4f6f5;
	--o-night: #2c3e50; /* footer slate */
	--o-night-2: #34495e;
	--o-on-night: rgba(255, 255, 255, 0.92);
	--o-on-night-muted: rgba(255, 255, 255, 0.68);
	--o-line-night: rgba(255, 255, 255, 0.16);

	/* Feedback */
	--o-danger: #b42318;
	--o-warning: #9a6700;

	/* Type */
	--o-font: "Plus Jakarta Sans", "Oplus Jakarta Fallback", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--o-font-ar: "IBM Plex Sans Arabic", "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif;

	--o-fs-xs: 0.75rem;     /* 12 — labels only, never body */
	--o-fs-sm: 0.875rem;    /* 14 */
	--o-fs-md: 1rem;        /* 16 — body */
	--o-fs-lg: 1.125rem;    /* 18 */
	--o-fs-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
	--o-fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
	--o-fs-3xl: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);

	--o-lh-tight: 1.15;
	--o-lh-snug: 1.35;
	--o-lh-body: 1.6;

	/* Space (4px base) */
	--o-s-1: 0.25rem;
	--o-s-2: 0.5rem;
	--o-s-3: 0.75rem;
	--o-s-4: 1rem;
	--o-s-5: 1.25rem;
	--o-s-6: 1.5rem;
	--o-s-8: 2rem;
	--o-s-10: 2.5rem;
	--o-s-12: 3rem;
	--o-s-16: 4rem;
	--o-section: clamp(3rem, 2rem + 4vw, 5.5rem);
	--o-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);

	/* Shape & depth */
	--o-r-sm: 8px;
	--o-r-md: 10px;  /* controls: buttons, fields, chips (header button is 9px) */
	--o-r-lg: 14px;  /* cards, panels (footer cards are 12px) */
	--o-r-pill: 999px; /* avatars/dots only — not controls */
	--o-shadow-1: 0 1px 2px rgba(19, 38, 28, 0.06);
	--o-shadow-2: 0 8px 30px rgba(19, 38, 28, 0.09); /* same tint as the header shadow */

	/* Motion */
	--o-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--o-t-fast: 150ms;
	--o-t-base: 220ms;

	/* Layout */
	--o-container: 1240px;
	--o-header-h: 77px;
	--o-touch: 44px;
}

@media (max-width: 991px) {
	:root { --o-header-h: 64px; }
}

/* ---------------------------------------------------------------------------
   Scope root
   ------------------------------------------------------------------------ */

.o-scope {
	font-family: var(--o-font);
	font-size: var(--o-fs-md);
	line-height: var(--o-lh-body);
	color: var(--o-text);
	background: var(--o-surface);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

[dir="rtl"] .o-scope,
.rtl .o-scope { font-family: var(--o-font-ar); }

.o-scope *,
.o-scope *::before,
.o-scope *::after { box-sizing: border-box; }

.o-scope h1,
.o-scope h2,
.o-scope h3,
.o-scope h4 {
	font-family: inherit;
	color: var(--o-ink);
	line-height: var(--o-lh-tight);
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

[dir="rtl"] .o-scope h1,
[dir="rtl"] .o-scope h2,
[dir="rtl"] .o-scope h3 { letter-spacing: 0; }

.o-scope p { margin: 0; }
.o-scope img { max-width: 100%; height: auto; display: block; }
.o-scope a { color: var(--o-brand-600); text-underline-offset: 0.18em; }
.o-scope a:hover { color: var(--o-brand-700); }

/* One focus treatment. Never removed. */
.o-scope :focus-visible {
	outline: 3px solid var(--o-brand-600);
	outline-offset: 2px;
	border-radius: 6px;
}

.o-num { font-variant-numeric: tabular-nums lining-nums; }

.o-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------ */

.o-container {
	width: min(100% - 2 * var(--o-gutter), var(--o-container));
	margin-inline: auto;
}

.o-section { padding-block: var(--o-section); }
.o-section--tint { background: var(--o-surface-2); }
.o-section--night { background: var(--o-night); color: var(--o-on-night-muted); }
.o-section--night h2,
.o-section--night h3 { color: #fff; }

.o-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--o-s-4) var(--o-s-8); margin-block-end: var(--o-s-8); }
.o-eyebrow { font-size: var(--o-fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--o-brand-600); margin-block-end: var(--o-s-2); }
[dir="rtl"] .o-eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--o-fs-sm); }
.o-section--night .o-eyebrow { color: var(--o-brand-500); }
.o-h2 { font-size: var(--o-fs-2xl); font-weight: 800; }
.o-lede { font-size: var(--o-fs-lg); color: var(--o-text); max-width: 64ch; margin-block-start: var(--o-s-3); }
.o-section--night .o-lede { color: var(--o-on-night-muted); }

/* ---------------------------------------------------------------------------
   Buttons — 44px+ targets, one primary per view
   ------------------------------------------------------------------------ */

.o-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--o-s-2);
	min-height: 48px; padding: var(--o-s-3) var(--o-s-6);
	border: 1px solid transparent; border-radius: var(--o-r-md);
	font: 700 var(--o-fs-sm)/1.2 var(--o-font);
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background-color var(--o-t-fast) var(--o-ease), border-color var(--o-t-fast) var(--o-ease), color var(--o-t-fast) var(--o-ease);
}
[dir="rtl"] .o-btn { font-family: var(--o-font-ar); }
.o-btn svg { width: 18px; height: 18px; flex: none; }
.o-scope .o-btn--primary,
.o-btn--primary { background: var(--o-brand-600); color: #fff; }
.o-scope .o-btn--primary:hover,
.o-btn--primary:hover { background: var(--o-brand-700); color: #fff; }
.o-scope .o-btn--secondary,
.o-btn--secondary { background: var(--o-surface); border-color: var(--o-line-strong); color: var(--o-ink); }
.o-scope .o-btn--secondary:hover,
.o-btn--secondary:hover { border-color: var(--o-ink); color: var(--o-ink); }
.o-scope .o-btn--on-night,
.o-btn--on-night { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.o-scope .o-btn--on-night:hover,
.o-btn--on-night:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }
.o-section--night :focus-visible { outline-color: var(--o-brand-500); }

/* ---------------------------------------------------------------------------
   Chips — values/actions (links or buttons), always wrap, never clip labels
   ------------------------------------------------------------------------ */

.o-chips { display: flex; flex-wrap: wrap; gap: var(--o-s-2); list-style: none; margin: 0; padding: 0; }
.o-chip {
	display: inline-flex; align-items: center; gap: var(--o-s-2);
	min-height: 40px; padding-inline: var(--o-s-4);
	border: 1px solid var(--o-line); border-radius: var(--o-r-md);
	background: var(--o-surface); color: var(--o-ink);
	font-size: var(--o-fs-sm); font-weight: 600; line-height: 1.2;
	text-decoration: none; white-space: nowrap;
	transition: border-color var(--o-t-fast) var(--o-ease), background-color var(--o-t-fast) var(--o-ease);
}
.o-scope a.o-chip { color: var(--o-ink); }
.o-scope a.o-chip:hover { border-color: var(--o-ink); color: var(--o-ink); }
.o-chip__count { color: var(--o-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.o-scope .o-chip[aria-current="page"],
.o-scope .o-chip.is-active { background: var(--o-brand-600); border-color: var(--o-brand-600); color: #fff; }
.o-chip[aria-current="page"] .o-chip__count,
.o-chip.is-active .o-chip__count { color: #fff; } /* 5.35:1 on brand-600; 0.72 alpha was 3.6:1 */
.o-chip svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------
   Fields — visible label, 48px control, 3:1 boundary
   ------------------------------------------------------------------------ */

.o-field { display: flex; flex-direction: column; gap: var(--o-s-1); min-width: 0; }
.o-field__label { font-size: var(--o-fs-xs); font-weight: 700; color: var(--o-muted); letter-spacing: 0.04em; }
.o-select { position: relative; display: flex; align-items: center; }
.o-select select {
	appearance: none; -webkit-appearance: none;
	width: 100%; min-height: 48px;
	padding-block: 0; padding-inline: var(--o-s-4) var(--o-s-10);
	border: 1px solid var(--o-line-strong); border-radius: var(--o-r-md);
	background: var(--o-surface); color: var(--o-ink);
	font: 600 var(--o-fs-sm)/1.2 sans-serif; font-family: inherit;
	cursor: pointer; text-overflow: ellipsis;
	transition: border-color var(--o-t-fast) var(--o-ease);
}
.o-select select:hover { border-color: var(--o-ink); }
.o-select.is-set select { border-color: var(--o-brand-600); background: var(--o-brand-50); }
.o-select svg { position: absolute; inset-inline-end: var(--o-s-3); width: 16px; height: 16px; pointer-events: none; color: var(--o-muted); }

/* ---------------------------------------------------------------------------
   Data table — quotable figures
   ------------------------------------------------------------------------ */

.o-table-wrap { overflow-x: auto; border: 1px solid var(--o-line); border-radius: var(--o-r-lg); background: var(--o-surface); }
.o-table { width: 100%; border-collapse: collapse; font-size: var(--o-fs-sm); }
.o-table caption { caption-side: top; text-align: start; padding: var(--o-s-4) var(--o-s-5) 0; font-weight: 700; color: var(--o-ink); font-size: var(--o-fs-md); }
.o-table th,
.o-table td { padding: var(--o-s-3) var(--o-s-5); text-align: start; border-block-end: 1px solid var(--o-line); white-space: nowrap; }
.o-table thead th { font-size: var(--o-fs-xs); font-weight: 700; color: var(--o-muted); letter-spacing: 0.04em; }
.o-table tbody tr:last-child th,
.o-table tbody tr:last-child td { border-block-end: 0; }
.o-table tbody th { color: var(--o-ink); font-weight: 600; }
.o-table td { font-variant-numeric: tabular-nums; color: var(--o-ink); }
.o-table .is-num { text-align: end; }

/* ---------------------------------------------------------------------------
   Motion — one entrance, gated on JS so nothing is hidden without it
   ------------------------------------------------------------------------ */

.o-io .o-reveal { opacity: 0; transform: translateY(12px); transition: opacity 360ms var(--o-ease), transform 360ms var(--o-ease); }
.o-io .o-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.o-scope *,
	.o-scope *::before,
	.o-scope *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.o-io .o-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   WordPress screen-reader text + skip link (standard core pattern).
   Defined here so a page that drops the block-library stylesheet keeps the
   skip link hidden until it is focused, and visible when it is.
   ------------------------------------------------------------------------ */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 100000;
	padding: 12px 18px;
	background: #fff;
	color: var(--o-brand-600, #247a3b);
	font-weight: 700;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(19, 38, 28, 0.15);
}

/* ---------------------------------------------------------------------------
   Listing card + grid — shared component (property-type archive, similar
   listings on the property page). Moved here from oplus-type.css so every
   page that shows a listing card gets the same card.
   ------------------------------------------------------------------------ */

.tx-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--o-s-6);
	list-style: none;
	margin: 0;
	padding: 0;
}


.tx-card { display: flex; }

.tx-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--o-surface);
	border: 1px solid var(--o-line);
	border-radius: var(--o-r-lg);
	overflow: hidden;
	transition: box-shadow var(--o-t-base) var(--o-ease), border-color var(--o-t-base) var(--o-ease);
}

.tx-card__inner:hover { border-color: transparent; box-shadow: var(--o-shadow-2); }

.tx-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--o-line); overflow: hidden; }
.tx-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--o-ease); }
.tx-card__inner:hover .tx-card__media img { transform: scale(1.03); }
.tx-card__ph { display: grid; place-items: center; height: 100%; color: var(--o-line-strong); }
.tx-card__ph .o-i { width: 40px; height: 40px; }

.tx-badge {
	position: absolute;
	inset-block-start: var(--o-s-3);
	inset-inline-start: var(--o-s-3);
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding-inline: var(--o-s-3);
	border-radius: var(--o-r-sm);
	background: var(--o-surface);
	color: var(--o-ink);
	font-size: var(--o-fs-xs);
	font-weight: 700;
	box-shadow: var(--o-shadow-1);
}

.tx-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--o-s-1); padding: var(--o-s-4) var(--o-s-5) var(--o-s-5); }

.tx-card__price { display: flex; align-items: baseline; gap: 0.35em; color: var(--o-ink); margin-block-end: 2px; }
.tx-card__cur { font-size: 0.8125rem; font-weight: 700; color: var(--o-brand-600); }
.tx-card__fig { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.tx-card__period { font-size: var(--o-fs-sm); color: var(--o-muted); font-weight: 600; }
.tx-card__request { font-size: 1rem; font-weight: 700; color: var(--o-text); line-height: 1.65; }

.tx-card__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; min-height: 2.8em; }
.o-scope .tx-card__link {
	color: var(--o-ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.o-scope .tx-card__link:hover { color: var(--o-brand-600); }
/* Whole card clickable through the title link — one tab stop, one name. */
.tx-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.o-scope .tx-card__link:focus-visible { outline: none; }
.tx-card__inner:has(.tx-card__link:focus-visible) { outline: 3px solid var(--o-brand-600); outline-offset: 2px; }

.tx-card__where { display: flex; align-items: center; gap: var(--o-s-1); font-size: 0.8125rem; color: var(--o-muted); min-width: 0; }
.tx-card__where .o-i { width: 15px; height: 15px; }
.tx-card__where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tx-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--o-s-3); margin-block-start: auto; padding-block-start: var(--o-s-4); margin-top: var(--o-s-3); border-block-start: 1px solid var(--o-line); }

.tx-specs { display: flex; flex-wrap: wrap; gap: var(--o-s-2) var(--o-s-4); list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--o-ink); font-weight: 600; }
.tx-specs li { display: inline-flex; align-items: center; gap: 6px; }
.tx-specs .o-i { width: 16px; height: 16px; color: var(--o-muted); }

.o-scope .tx-card__wa {
	position: relative;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border: 1px solid var(--o-line);
	border-radius: var(--o-r-md);
	color: var(--o-brand-600);
	transition: background-color var(--o-t-fast) var(--o-ease), border-color var(--o-t-fast) var(--o-ease);
}
.o-scope .tx-card__wa:hover { background: var(--o-brand-50); border-color: var(--o-brand-600); color: var(--o-brand-700); }


@media (max-width: 1100px) { .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .tx-grid { grid-template-columns: minmax(0, 1fr); gap: var(--o-s-4); } .tx-card__title { min-height: 0; } }
.o-scope .o-i { width: 18px; height: 18px; flex: none; }