/**
 * FIND-PROPERTY — page stylesheet for /find-property/ (WordPress page 19).
 * Loads only on the page whose slug is "find-property": inc/afd-page-assets.php
 * emits the key "page-find-property" for it, enqueues this file after the parent
 * theme and versions it by filemtime. No PHP, Elementor or plugin file is edited.
 *
 * ---------------------------------------------------------------------------
 * WHAT THIS IS
 *
 * An ADAPTER, not a component. The page body is one shortcode,
 * [ere_advanced_search] (Essential Real Estate), so there is no Elementor widget
 * to hang an afd-* class on. This file maps the plugin's own markup (form, tabs,
 * result grid, pager, empty state) onto the kit's tokens and surface contract
 * (--ink --ink-2 --ink-h --ink-hi --card --line --line-2 --ring --chip-* and the
 * --afd-* brand tokens), so the page follows the design system instead of the
 * plugin's factory skin (orange #FE6A00, black tab strip, Bootstrap blue).
 *
 *   - ZERO new afd-* classes (nothing to add to the UCSS allowlist, nothing for
 *     a Change Proposal).
 *   - ZERO JavaScript. Every show/hide rule below is gated on a native state.
 *   - ZERO colour literals outside section 1 (one documented fallback block).
 *   - Logical properties throughout: this is an RTL site.
 *
 * ---------------------------------------------------------------------------
 * HOW THE RE-SKIN WORKS
 *
 * ERE paints itself from custom properties (--ere-color-accent and friends,
 * declared on :root in essential-real-estate/.../main.css). Section 1 re-declares
 * them on .ere-advanced-search-wrap, so ERE's own rules repaint tabs, toggles and
 * badges with brand colours and there is no specificity fight for those. The rest
 * of the file is layout and shape, written one step above the plugin's
 * specificity and prefixed with `body ` exactly like the kit build does.
 *
 * ---------------------------------------------------------------------------
 * FAILURE MODES (what a visitor gets when something is missing)
 *
 *   kit not loaded        every token below resolves to its fallback or to
 *                         nothing; the ERE fallbacks in section 1 restore the
 *                         plugin's factory look. Readable, never invisible: no
 *                         rule pairs a token background with a literal ink.
 *   :has() unsupported    every rule that hides a CONTROL or a data cell (the
 *                         duplicate status/country/state/city fields, the phone
 *                         fold, the empty info bar) is written with :has() in its
 *                         condition, so an old browser keeps it and the layout
 *                         falls back to the plugin's own grid. The other hides
 *                         are decoration or approved deletions (the "on sale"
 *                         badge, the card date, icons) and the guest-only "Save
 *                         search" button, which does nothing for a guest.
 *   this file missing     the page is exactly what it is today.
 *   JavaScript blocked    ERE's own search button needs JS with or without this
 *                         file (it is type="button"), so the form is inert either
 *                         way; the results and the pager (plain links) stay
 *                         readable. The one rule that reads JS-managed state is
 *                         the phone fold: it follows the plugin's Bootstrap
 *                         collapse (.show), so it needs JS exactly when the
 *                         search button does.
 *
 * ---------------------------------------------------------------------------
 * !important REGISTER — five declarations, each one undoing a parent-theme
 * !important (afdalhome-theme/style-rtl.css, measured live 2026-09-23). An
 * !important can only be undone by another one. Precedent and the same
 * exemption: src/afd-kit-2026.css section 39, and CLAUDE-DESIGN-RULES section 7.
 * Approved for this page by the site owner on 2026-09-23 (limit: five).
 *
 *   1  .property-price-prefix  color        style-rtl.css:760  (gold on white 2.31:1)
 *   2  .property-price        font-size     style-rtl.css:770  (14px !important)
 *   3  .property-info-inner   height        style-rtl.css:762  (12px !important)
 *   4  .property-info         background    style-rtl.css:485-487 (gold bar)
 *   5  .view-as span.active   background    style-rtl.css:483  (gold fill; now navy)
 *
 * (The reduced-motion block at the end is the kit's sanctioned exception.)
 *
 * KNOB. --fp-ratio is the card photo ratio. The plugin ships 330x180 thumbnails
 * (ERE Options > Search > "Image Size"); at 4/3 they would be enlarged 1.4x and
 * cropped at the sides, so the default keeps their own ratio. After the owner
 * raises the image size to 660 px or more, set --fp-ratio to 4 / 3 (the kit's
 * card ratio) here and nothing else has to change.
 *
 * ROLLBACK: delete this file. The loader skips a file that is not there.
 *
 * @package Afdalhome_Theme_Child
 */

/* ========================================================================== */
/* 1 - TOKENS: re-point the plugin's skin at the kit                           */
/*     The hex values after each comma are the plugin's own factory colours    */
/*     (what the page shows today). They are only ever used if the kit is      */
/*     missing, so the worst case is the current look, not a broken one.       */
/* ========================================================================== */

body .ere-advanced-search-wrap {
	--ere-color-accent:            var(--afd-navy, #FE6A00);
	--ere-color-accent-foreground: var(--afd-white, #FFFFFF);
	--ere-color-heading:           var(--ink-h, #222222);
	--ere-color-border:            var(--line, #EEEEEE);
	--ere-property-search-form-text-color:   var(--ink-2, #8F8F8F);
	--ere-property-search-form-border-color: var(--line-2, #DEDEDE);
	--ere-search-status-tab-bg-color:        transparent;
	--ere-search-status-tab-text-color:      var(--chip-ink, #BABABA);
	--ere-loop-property-badge-color:         var(--afd-white, #FFFFFF);
	--ere-archiver-action-height:            44px;

	/* page knobs — see KNOB above */
	--fp-ratio:    330 / 180;
	/* A text field is identified by its border, so the border is held to the 3:1
	   non-text target (WCAG 1.4.11): 60% navy over white = 3.36:1, computed with
	   deliverables/tools/check_contrast.py. The kit's --line-2 is about 1.4:1. */
	--fp-border:   color-mix(in srgb, var(--afd-navy) 60%, var(--afd-white));
	--fp-gap:      clamp(12px, 1.4vw, 18px);
	--fp-card-gap: clamp(16px, 2vw, 26px);

	/* the theme's .dk-p container sets line-height 2.5 and 14px for prose */
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink);
	text-align: start;
}

/* ========================================================================== */
/* 2 - MASTHEAD: the parent theme's grey bar becomes a plain heading           */
/*     (afdalhome-theme/style-rtl.css:369  .dk-p h1 { background:#4c4c4c ... }) */
/* ========================================================================== */

body .dk-p:has(.ere-advanced-search-wrap) {
	padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px);
	line-height: 1.7;
}
body .dk-p:has(.ere-advanced-search-wrap) .entry-header {
	margin-block-end: clamp(18px, 2.4vw, 28px);
}
body .dk-p:has(.ere-advanced-search-wrap) .entry-title {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ink-h);
	font-size: clamp(25px, 3.4vw, 40px);
	font-weight: 700;
	line-height: 1.5;
	text-align: start;
	text-wrap: balance;
}
body .dk-p:has(.ere-advanced-search-wrap) .entry-title::after {
	content: "";
	display: block;
	inline-size: 56px;
	block-size: 3px;
	margin-block-start: 14px;
	border-radius: 99px;
	background: var(--afd-grad-gold);
}

/* ========================================================================== */
/* 3 - SEARCH CARD + STATUS TABS                                               */
/* ========================================================================== */

body .ere-advanced-search-wrap .ere-property-advanced-search {
	margin: 0;
	padding: clamp(16px, 2.2vw, 28px);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--afd-r-lg);
	box-shadow: var(--afd-sh-sm);
}

/* the tab strip is a row of pills; the active pill is the only solid one */
body .ere-advanced-search-wrap .ere-search-status-tab {
	margin: 0 0 clamp(14px, 1.8vw, 20px);
	background: none;
}
body .ere-advanced-search-wrap .ere-search-status-tab-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body .ere-advanced-search-wrap .ere-search-status-tab button {
	block-size: 44px;
	padding: 0 18px;
	border: 1px solid var(--line-2);
	border-radius: var(--afd-r-pill);
	background: var(--chip-bg);
	color: var(--chip-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--afd-speed) var(--afd-ease),
	            border-color var(--afd-speed) var(--afd-ease),
	            color var(--afd-speed) var(--afd-ease);
}
body .ere-advanced-search-wrap .ere-search-status-tab button:hover {
	border-color: var(--ring);
	background: var(--chip-bg);
	color: var(--chip-ink);
}
body .ere-advanced-search-wrap .ere-search-status-tab button.active,
body .ere-advanced-search-wrap .ere-search-status-tab button.active:hover {
	border-color: transparent;
	background: var(--afd-navy);
	color: var(--afd-white);
}
body .ere-advanced-search-wrap .ere-search-status-tab button:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 3px;
}

/* ========================================================================== */
/* 4 - FIELD GRID                                                              */
/*     Bootstrap's .row/.col-* become one 12-column grid. NOTHING is reordered  */
/*     on desktop or tablet: the visual order is the plugin's DOM order, which  */
/*     is also the Tab order and the screen-reader order (what/where, rooms,    */
/*     price, area, land, extras). 4 fields per row on desktop, 3 on a tablet.  */
/*     The rules are scoped to the DIRECT .row: the feature checklist nests     */
/*     another .row inside .form-search and must not inherit any of this.       */
/* ========================================================================== */

body .ere-advanced-search-wrap .form-search {
	margin: 0;
	padding: 0;
}
body .ere-advanced-search-wrap .form-search > .row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--fp-gap);
	align-items: start;
	margin: 0;
}
body .ere-advanced-search-wrap .form-search > .row > * {
	grid-column: span 3;
	inline-size: auto;
	min-inline-size: 0;
	max-inline-size: none;
	flex: none;
	margin: 0;
	padding: 0;
}

/* The plugin wraps the toggle and the checklist in one .col-12; display:contents
   lets each become its own grid item. Toggle and submit form the footer row of
   the card; when the list is opened it takes a full row between them, and the
   submit button still comes after both — in the DOM, on screen and in the Tab
   order. */
body .ere-advanced-search-wrap .form-search .other-features-wrap { display: contents; }
body .ere-advanced-search-wrap .form-search .enable-other-features { grid-column: span 8; align-self: center; }
body .ere-advanced-search-wrap .form-search #ere_search_other_features { grid-column: 1 / -1; }
/* margin/text-align: the plugin's RTL rule (.rtl .form-search-wrap.form-search-wrap
   .submit-search-form, specificity 0,4,0) sets margin-right:auto and text-align:left */
body .ere-advanced-search-wrap .form-search > .row > .submit-search-form {
	grid-column: span 4;
	justify-self: end;
	margin: 0;
	text-align: start;
}

/* Fields that carry no choice on a Dubai-only site, or that repeat a control
   already on screen. Their values stay at the default the plugin already sends
   (verified in property-advanced-search.js: a value equal to data-default-value
   is left out of the URL), so hiding them changes no search result.
     status   the tab strip above is the real status control
     country / state / city   one real option each */
body .ere-advanced-search-wrap .form-search > .row > :has(> :is([name="status"], [name="country"], [name="state"], [name="city"])) {
	display: none;
}

/* ========================================================================== */
/* 5 - CONTROLS                                                                */
/* ========================================================================== */

body .ere-advanced-search-wrap .form-search .form-control {
	display: block;
	inline-size: 100%;
	block-size: 48px;
	min-block-size: 48px;
	margin: 0;
	padding-block: 0;
	padding-inline: 14px;
	border: 1px solid var(--fp-border);
	border-radius: var(--afd-r-sm);
	background-color: var(--card);
	box-shadow: none;
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color var(--afd-speed) var(--afd-ease);
}
/* a select that still says "any" reads as a hint, a chosen one reads as a value */
body .ere-advanced-search-wrap .form-search select.form-control:has(option[value=""]:checked) {
	color: var(--ink-2);
}
body .ere-advanced-search-wrap .form-search .form-control::placeholder {
	color: var(--ink-2);
	opacity: 1;
}
/* the plugin hides the native arrow and draws nothing, so a select looked like a
   text box. Two gradients make a chevron from currentColor: no image, no colour
   literal. Physical left/right on purpose: background-position is physical. */
body .ere-advanced-search-wrap .form-search select.form-control {
	appearance: none;
	padding-inline-end: 40px;
	cursor: pointer;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ink-h) 50%),
		linear-gradient(135deg, var(--ink-h) 50%, transparent 50%);
	background-position: left 14px top calc(50% - 2px), left 20px top calc(50% - 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
body .ere-advanced-search-wrap .form-search .form-control:hover {
	border-color: var(--ring);
}
body .ere-advanced-search-wrap .form-search .form-control:focus,
body .ere-advanced-search-wrap .form-search .form-control:focus-visible {
	border-color: var(--ring);
	box-shadow: none;
	color: var(--ink);
}
body .ere-advanced-search-wrap .form-search .form-control:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

/* the one primary action of the section: the kit's gold, ink from the kit */
body .ere-advanced-search-wrap .form-search .ere-advanced-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 52px;
	min-inline-size: 176px;
	margin: 0;
	padding: 0 32px;
	border: 0;
	border-radius: var(--afd-r-pill);
	background: var(--afd-grad-gold);
	box-shadow: var(--afd-sh-sm);
	color: var(--afd-onGold);
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--afd-speed) var(--afd-ease),
	            box-shadow var(--afd-speed) var(--afd-ease);
}
body .ere-advanced-search-wrap .form-search .ere-advanced-search-btn:hover {
	transform: translateY(-3px);
	box-shadow: var(--afd-sh);
	color: var(--afd-onGold);
}
body .ere-advanced-search-wrap .form-search .ere-advanced-search-btn:active { transform: none; }
body .ere-advanced-search-wrap .form-search .ere-advanced-search-btn:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 3px;
}

/* ========================================================================== */
/* 6 - "OTHER FEATURES" TOGGLE + CHECKLIST                                     */
/* ========================================================================== */

body .ere-advanced-search-wrap .form-search-wrap.form-search-wrap .btn-other-features {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
	color: var(--ink-h);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
body .ere-advanced-search-wrap .form-search-wrap.form-search-wrap .btn-other-features i {
	display: grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--chip-bg);
	color: var(--chip-ink);
	font-size: 12px;
	transition: transform var(--afd-speed) var(--afd-ease);
}
/* the plugin never sets aria-expanded, but Bootstrap does toggle .show on the list */
body .ere-advanced-search-wrap .other-features-wrap:has(#ere_search_other_features.show) .btn-other-features i {
	transform: rotate(180deg);
}
body .ere-advanced-search-wrap .btn-other-features:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 3px;
	border-radius: var(--afd-r-sm);
}
body .ere-advanced-search-wrap .btn-other-features:focus:not(:focus-visible) { outline: none; }
body .ere-advanced-search-wrap .other-features-list {
	margin: 0;
	padding-block-start: var(--fp-gap);
	border-block-start: 1px solid var(--line);
}
body .ere-advanced-search-wrap .other-features-list > .row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: 2px 10px; /* + the 8px .mt-2 the plugin puts on every item */
	margin: 0;
}
body .ere-advanced-search-wrap .other-features-list > .row > * {
	inline-size: auto;
	min-inline-size: 0;
	max-inline-size: none;
	flex: none;
	margin: 0;
	padding: 0;
}
body .ere-advanced-search-wrap .other-features-list .form-check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
	margin: 0;
	padding-block: 0;
	padding-inline: 12px;
	border: 1px solid var(--line);
	border-radius: var(--afd-r-sm);
	background: var(--card);
	cursor: pointer;
	transition: border-color var(--afd-speed) var(--afd-ease),
	            background-color var(--afd-speed) var(--afd-ease);
}
body .ere-advanced-search-wrap .other-features-list .form-check:hover { border-color: var(--ring); }
body .ere-advanced-search-wrap .other-features-list .form-check:has(:checked) {
	border-color: var(--ring);
	background: var(--chip-bg);
}
body .ere-advanced-search-wrap .other-features-list .form-check:has(:focus-visible) {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
body .ere-advanced-search-wrap .other-features-list .form-check-input {
	position: static;
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	margin: 0;
	accent-color: var(--afd-navy);
	cursor: pointer;
}
body .ere-advanced-search-wrap .other-features-list .form-check-label {
	flex: 1;
	margin: 0;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

/* "Save search" only works for a logged-in user: for everyone else the plugin
   points it at #ere_signin_modal, which does not exist on the page (0 elements,
   checked on the served HTML), so it was a button that did nothing. WordPress
   puts .logged-in on <body> for the people it can work for. */
body:not(.logged-in) .ere-advanced-search-wrap .advanced-saved-searches { display: none; }
body .ere-advanced-search-wrap .advanced-saved-searches {
	display: flex;
	justify-content: flex-end;
	margin-block-start: 12px;
}
body .ere-advanced-search-wrap .btn-save-search {
	min-block-size: 44px;
	border: 1px solid var(--line-2);
	background: var(--card);
	color: var(--ink-h);
	font-weight: 700;
}

/* ========================================================================== */
/* 7 - RESULTS BAR: heading + count, sort, grid/list switch                    */
/* ========================================================================== */

body .ere-advanced-search-wrap .ere-archive-property { margin-block-start: clamp(28px, 3.6vw, 44px); }
body .ere-advanced-search-wrap .above-archive-property {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin-block-end: clamp(16px, 2vw, 22px);
}
body .ere-advanced-search-wrap .ere-heading { margin: 0; }
body .ere-advanced-search-wrap .ere-heading::after { content: none; }
body .ere-advanced-search-wrap .ere-heading h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--ink-h);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	line-height: 1.4;
	text-transform: none;
}
body .ere-advanced-search-wrap .ere-heading h2 sub {
	position: static;
	display: inline-flex;
	padding: 2px 12px;
	border-radius: var(--afd-r-pill);
	background: var(--chip-bg);
	color: var(--chip-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	font-variant-numeric: tabular-nums;
}
body .ere-advanced-search-wrap .archive-property-action {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
body .ere-advanced-search-wrap .archive-property-action .ere__apa-item { margin: 0; }

/* sort: a Bootstrap dropdown, kept as one, dressed like a select */
body .ere-advanced-search-wrap .ere__apa-orderby { min-inline-size: 0; }
body .ere-advanced-search-wrap .ere__apa-orderby .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	block-size: 44px;
	padding: 0 16px;
	border: 1px solid var(--line-2);
	border-radius: var(--afd-r-sm);
	background: var(--card);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
body .ere-advanced-search-wrap .ere__apa-orderby .dropdown-toggle::after {
	position: static;
	margin: 0;
	transform: none;
	color: var(--ink-h);
}
body .ere-advanced-search-wrap .ere__apa-orderby .dropdown-toggle:hover { border-color: var(--ring); }
body .ere-advanced-search-wrap .ere__apa-orderby .dropdown-toggle:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
body .ere-advanced-search-wrap .ere__apa-orderby .dropdown-menu {
	min-inline-size: 220px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: var(--afd-r-sm);
	background: var(--card);
	box-shadow: var(--afd-sh);
}
body .ere-advanced-search-wrap .ere__apa-orderby .dropdown-item {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	padding: 0 12px;
	border-radius: var(--afd-r-sm);
	color: var(--ink);
	font-size: 14px;
	white-space: normal;
}
body .ere-advanced-search-wrap .ere__apa-orderby .dropdown-item:hover,
body .ere-advanced-search-wrap .ere__apa-orderby .dropdown-item:focus {
	background: var(--chip-bg);
	color: var(--ink-h);
}
body .ere-advanced-search-wrap .ere__apa-orderby .dropdown-item:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: -2px;
}

/* grid / list switch: two 44px squares joined into one control. The plugin draws
   them as <span>s with angled ::before notches; the notches go. */
body .ere-advanced-search-wrap .ere__apa-switch-layout .view-as {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: var(--afd-r-sm);
}
body .ere-advanced-search-wrap .ere__apa-switch-layout span {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	background: var(--card);
	color: var(--ink-h);
	cursor: pointer;
	transition: background-color var(--afd-speed) var(--afd-ease);
}
body .ere-advanced-search-wrap .ere__apa-switch-layout span::before { display: none; }
body .ere-advanced-search-wrap .ere__apa-switch-layout span i { line-height: 1; }
/* selected = navy, the same as the active status tab. The theme fills the active
   and hovered span with its own gold, !important (style-rtl.css:483). */
body .ere-advanced-search-wrap .ere__apa-switch-layout .view-as span.active,
body .ere-advanced-search-wrap .ere__apa-switch-layout .view-as span:hover {
	background-color: var(--afd-navy) !important; /* register 5: style-rtl.css:483 */
	color: var(--afd-white);
}

/* ========================================================================== */
/* 8 - RESULT CARD (grid and list)                                             */
/*     The kit's adapter .afd-listing targets .property-item; this page prints */
/*     .ere-item-wrap > .property-inner (0 elements with .property-item), so   */
/*     the card look of .afd-pcard is applied here, to the markup that exists. */
/* ========================================================================== */

body .ere-advanced-search-wrap .ere-property { display: grid; gap: var(--fp-card-gap); margin: 0; padding: 0; }
body .ere-advanced-search-wrap .ere-property::before,
body .ere-advanced-search-wrap .ere-property::after { content: none; }
body .ere-advanced-search-wrap .ere-property.property-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px)  { body .ere-advanced-search-wrap .ere-property.property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { body .ere-advanced-search-wrap .ere-property.property-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body .ere-advanced-search-wrap .ere-property.property-list { grid-template-columns: minmax(0, 1fr); }

/* the plugin sizes the wrappers with percentages and clears; in a grid the
   cell already is the width */
body .ere-advanced-search-wrap .ere-property > .ere-item-wrap {
	display: flex;
	inline-size: auto;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	float: none;
}

body .ere-advanced-search-wrap .ere-property .ere-item-wrap > .property-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	padding: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--afd-r);
	box-shadow: var(--afd-sh-sm);
	transition: transform var(--afd-speed) var(--afd-ease),
	            box-shadow var(--afd-speed) var(--afd-ease),
	            border-color var(--afd-speed) var(--afd-ease);
}
body .ere-advanced-search-wrap .ere-property .ere-item-wrap > .property-inner:hover {
	transform: translateY(-5px);
	box-shadow: var(--afd-sh);
	border-color: var(--line-2);
}
/* The title link IS the card (it is stretched over it), so when it has focus the
   CARD is outlined, not a hairline around a text link. The other links inside
   (type chips, developer, gallery button) keep an outline of their own, so a
   keyboard user can always tell which of them holds focus. */
body .ere-advanced-search-wrap .ere-property .ere-item-wrap > .property-inner:has(.property-title a:focus-visible) {
	outline: 2px solid var(--ring);
	outline-offset: 3px;
}
body .ere-advanced-search-wrap .ere-property .property-title a:focus-visible { outline: none; }
body .ere-advanced-search-wrap .ere-property .property-type-list a:focus-visible,
body .ere-advanced-search-wrap .ere-property .property-agent a:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: var(--afd-r-sm);
}

/* --- photo, scrim, badges, gallery button ---------------------------------- */
body .ere-advanced-search-wrap .ere-property .property-image {
	position: relative;
	z-index: auto;
	overflow: hidden;
	margin: 0;
	background: var(--chip-bg);
}
/* the plugin darkens the whole photo on hover (a 60% black ::before); the card
   already lifts and zooms, so that overlay goes */
body .ere-advanced-search-wrap .ere-property .property-image::before { display: none; }
body .ere-advanced-search-wrap .ere-property .property-image::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 42%;
	pointer-events: none;
	background-image: linear-gradient(to top, var(--afd-scrim-card), transparent);
}
body .ere-advanced-search-wrap .ere-property .property-image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--fp-ratio);
	object-fit: cover;
	transition: transform 600ms var(--afd-ease);
}
body .ere-advanced-search-wrap .ere-property .property-inner:hover .property-image img { transform: scale(1.05); }

/* Two badge groups: the project stage (label) at the top, the sale kind (status)
   at the bottom, both at the inline start. The plugin colours every badge with
   an inline #888 (white on it = 3.54:1, 25 failing nodes on the first page), so
   the fill is set on the inner span, which is what the plugin paints. */
body .ere-advanced-search-wrap .ere-property .ere__loop-property-badge {
	position: absolute;
	inset: auto;
	inset-inline-start: 12px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-inline-size: calc(100% - 24px);
	margin: 0;
	font-size: 12px;
	pointer-events: none;
}
body .ere-advanced-search-wrap .ere-property .ere__loop-property-badge.ere__lpb-featured-label { inset-block-start: 12px; }
body .ere-advanced-search-wrap .ere-property .ere__loop-property-badge.ere__lpb-status { inset-block-end: 12px; max-inline-size: calc(100% - 72px); }
body .ere-advanced-search-wrap .ere-property .ere__loop-property-badge .ere__loop-property-badge-item { display: inline-flex; margin: 0; }
body .ere-advanced-search-wrap .ere-property .ere__loop-property-badge .ere__loop-property-badge-item .ere__lpbi-inner,
body .ere-advanced-search-wrap .ere-property .ere__loop-property-badge.ere__lpb-status .ere__loop-property-badge-item .ere__lpbi-inner {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--afd-r-pill);
	background: var(--afd-navy);
	color: var(--afd-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
}
body .ere-advanced-search-wrap .ere-property .ere__loop-property-badge .ere__lpbi-inner::after { display: none; }
/* the one label that means "ready now" takes the kit's pale gold, like .afd-badge--ready */
body .ere-advanced-search-wrap .ere-property .ere__loop-property-badge .ere__term-label.move-in-ready .ere__lpbi-inner {
	background: var(--afd-gold-pale);
	color: var(--afd-navy-900);
}
/* sale kind: white pill, navy ink */
body .ere-advanced-search-wrap .ere-property .ere__loop-property-badge.ere__lpb-status .ere__loop-property-badge-item .ere__lpbi-inner {
	background: var(--afd-white);
	color: var(--afd-navy);
}
/* "for sale" is on 327 of 327 cards, on a page whose default tab is "for sale":
   it carries no information, so it is not printed on every card */
body .ere-advanced-search-wrap .ere-property .ere__term-status.on-sale { display: none; }

/* the gallery button was invisible until hover (opacity 0) yet still focusable,
   and on touch it could not be reached at all: it is now always there, 44px */
body .ere-advanced-search-wrap .ere-property .ere__loop-property-action {
	position: absolute;
	inset: auto;
	inset-block-end: 12px;
	inset-inline-end: 12px;
	z-index: 4;
	transform: none;
	opacity: 1;
}
body .ere-advanced-search-wrap .ere-property .ere__loop-property_action-item {
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	border-radius: 50%;
	background: var(--afd-white);
	box-shadow: var(--afd-sh-sm);
	color: var(--afd-navy);
	font-size: 16px;
	transition: background-color var(--afd-speed) var(--afd-ease),
	            color var(--afd-speed) var(--afd-ease);
}
body .ere-advanced-search-wrap .ere-property .ere__loop-property_action-item:hover,
body .ere-advanced-search-wrap .ere-property .ere__loop-property_action-item:focus-visible {
	background: var(--afd-navy);
	color: var(--afd-white);
}
body .ere-advanced-search-wrap .ere-property .ere__loop-property_action-item:focus-visible {
	outline: 2px solid var(--afd-white);
	outline-offset: 2px;
}
/* The gallery button is an icon-only link (12 "links do not have a discernible
   name" on the first page, Lighthouse). The plugin's tooltip script moves its
   label, "(2) عکس ها", into data-bs-original-title and empties title=, so the
   name exists in the page but not where a screen reader looks. Generated content
   is part of an accessible name in Chrome, Safari and Firefox, so the label is
   printed, visually hidden, from that same attribute. No text is written here:
   it is the plugin's own string, photo count included. */
body .ere-advanced-search-wrap .ere-property .property-view-gallery[data-bs-original-title]::after {
	content: attr(data-bs-original-title);
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* an empty link laid over the photo, named only by a title attribute and
   duplicating the title link: gone. The title link below covers the whole card. */
body .ere-advanced-search-wrap .ere-property a.property-link { display: none; }

/* --- body ------------------------------------------------------------------ */
body .ere-advanced-search-wrap .ere-property .property-item-content {
	position: static;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	inline-size: auto; /* the plugin's list view sets width:1px, which a grid cell does not stretch */
	min-inline-size: 0;
	padding: 16px 18px 18px;
}
body .ere-advanced-search-wrap .ere-property .property-heading {
	position: static;
	display: grid;
	gap: 6px;
	margin: 0;
}
body .ere-advanced-search-wrap .ere-property .property-item-content .property-title {
	margin: 0;
	overflow: hidden;
	color: var(--ink-h);
	font-weight: 800;
	line-height: 1.65;
	text-align: start;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* The theme paints this link gold on hover with !important (style-rtl.css:507-509),
   and because the link is stretched over the card, "hover" means the pointer is
   anywhere on the card. -webkit-text-fill-color is a different property from
   color, so it wins without a sixth !important. Without it the fallback is
   simply the gold hover the theme already has. */
body .ere-advanced-search-wrap .ere-property .property-title a,
body .ere-advanced-search-wrap .ere-property .property-title a:hover {
	color: var(--ink-h);
	-webkit-text-fill-color: var(--ink-h);
	text-decoration-color: var(--ink-h);
}
body .ere-advanced-search-wrap .ere-property .property-title a { text-decoration: none; }
body .ere-advanced-search-wrap .ere-property .property-title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* one link per card: the title's link is stretched over the whole card */
body .ere-advanced-search-wrap .ere-property .property-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* price: the most scanned thing on a card. The plugin's own price is
   "<prefix> <amount>" in one span; a listing with no price prints a sentence
   instead and has no prefix, so it keeps the theme's smaller size. */
body .ere-advanced-search-wrap .ere-property .property-item-content .property-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	/* the theme pads the box 2px 5px !important and boxes it; the box goes, and
	   the padding is cancelled with a margin instead of a second !important */
	margin: -2px -5px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ink-hi);
	font-weight: 800;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}
body .ere-advanced-search-wrap .ere-property .property-item-content .property-price:has(.property-price-prefix) {
	font-size: 20px !important; /* register 2: style-rtl.css:770 */
}
body .ere-advanced-search-wrap .ere-property .property-price:not(:has(.property-price-prefix)) {
	color: var(--ink-2);
	font-weight: 700;
}
body .ere-advanced-search-wrap .ere-property .property-price .property-price-prefix {
	color: var(--ink-2) !important; /* register 1: style-rtl.css:760 */
	font-size: 13px;
	font-weight: 600;
}

/* meta: project types as chips, developer as a quiet line, date not printed
   (a listing date ages an off-plan project for no benefit — same call as the
   kit's .afd-listing--rich and ere-single.css) */
body .ere-advanced-search-wrap .ere-property .property-element-inline {
	display: grid;
	gap: 8px;
	margin: 0;
}
body .ere-advanced-search-wrap .ere-property .property-type-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	inline-size: 100%;
	margin: 0;
	font-size: 0; /* swallows the ", " the plugin prints between the links */
	text-align: start;
}
body .ere-advanced-search-wrap .ere-property .property-type-list a {
	position: relative;
	z-index: 2;
	display: inline-flex;
	padding: 2px 10px;
	border-radius: var(--afd-r-pill);
	background: var(--chip-bg);
	color: var(--chip-ink);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.8;
	text-decoration: none;
}
body .ere-advanced-search-wrap .ere-property .property-type-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
body .ere-advanced-search-wrap .ere-property .property-type-list i,
body .ere-advanced-search-wrap .ere-property .property-agent i { display: none; }
body .ere-advanced-search-wrap .ere-property .property-agent {
	position: relative;
	z-index: 2;
	min-inline-size: 0;
	margin: 0;
	font-size: 13px;
}
body .ere-advanced-search-wrap .ere-property .property-agent a {
	display: block;
	min-block-size: 24px; /* the WCAG 2.5.8 minimum target; it measured 22px */
	line-height: 24px;
	overflow: hidden;
	color: var(--ink-2);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body .ere-advanced-search-wrap .ere-property .property-agent a:hover { color: var(--ink-h); text-decoration: underline; text-underline-offset: 3px; }
body .ere-advanced-search-wrap .ere-property .property-date { display: none; }

body .ere-advanced-search-wrap .ere-property .property-excerpt {
	margin: 0;
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.9;
}

/* spec row (beds / baths / size). 324 of 327 cards print it EMPTY, and the theme
   paints that empty box as a 12px gold bar (style-rtl.css:485-487, :762), so an
   empty one is not shown. The 3 that have content keep a plain ruled row. */
body .ere-advanced-search-wrap .ere-property .property-info:not(:has(.property-info-inner > *)) { display: none; }
body .ere-advanced-search-wrap .ere-property .property-info {
	margin: auto 0 0;
	padding: 12px 0 0;
	border-block-start: 1px solid var(--line);
	background-color: transparent !important; /* register 4: style-rtl.css:485-487 */
	color: var(--ink);
}
body .ere-advanced-search-wrap .ere-property .property-info .property-info-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	justify-content: flex-start;
	height: auto !important; /* register 3: style-rtl.css:762 */
	padding: 0;
}
body .ere-advanced-search-wrap .ere-property .ere__loop-property-info-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}
body .ere-advanced-search-wrap .ere-property .ere__loop-property-info-item i { margin: 0; color: var(--ink-hi); font-size: 14px; }
body .ere-advanced-search-wrap .ere-property .ere__lpi-content { display: flex; align-items: baseline; gap: 4px; }
body .ere-advanced-search-wrap .ere-property .ere__lpi-value { font-weight: 800; font-variant-numeric: tabular-nums; }
body .ere-advanced-search-wrap .ere-property .ere__lpi-label { color: var(--ink-2); }

/* --- list view: photo beside the text (the plugin stacks it full width) ------ */
@media (min-width: 768px) {
	body .ere-advanced-search-wrap .ere-property.property-list .ere-item-wrap > .property-inner {
		display: grid;
		grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
	}
	body .ere-advanced-search-wrap .ere-property.property-list .property-image { max-inline-size: none; block-size: 100%; }
	body .ere-advanced-search-wrap .ere-property.property-list .property-image img { block-size: 100%; aspect-ratio: auto; min-block-size: 200px; }
}
body .ere-advanced-search-wrap .ere-property.property-list .property-excerpt {
	display: -webkit-box;
	max-block-size: none;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ========================================================================== */
/* 9 - PAGER + EMPTY STATE (the kit's .afd-pager and .afd-empty, on ERE's DOM)  */
/* ========================================================================== */

body .ere-advanced-search-wrap .paging-navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-block-start: clamp(26px, 3vw, 40px);
}
body .ere-advanced-search-wrap .paging-navigation::before,
body .ere-advanced-search-wrap .paging-navigation::after { content: none; }
body .ere-advanced-search-wrap .paging-navigation .page-numbers {
	display: grid;
	place-items: center;
	float: none;
	min-inline-size: 44px;
	min-block-size: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: var(--afd-r-sm);
	background: var(--card);
	color: var(--ink-h);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--afd-speed) var(--afd-ease),
	            color var(--afd-speed) var(--afd-ease);
}
body .ere-advanced-search-wrap .paging-navigation a.page-numbers:hover {
	border-color: transparent;
	background: var(--afd-navy);
	color: var(--afd-white);
}
body .ere-advanced-search-wrap .paging-navigation a.page-numbers:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 3px;
}
body .ere-advanced-search-wrap .paging-navigation .page-numbers.current {
	border-color: transparent;
	background: var(--afd-grad-gold);
	color: var(--afd-onGold);
}
body .ere-advanced-search-wrap .paging-navigation .page-numbers.dots {
	min-inline-size: 0;
	border: 0;
	background: none;
	color: var(--ink-2);
}

body .ere-advanced-search-wrap .ere-property .item-not-found {
	grid-column: 1 / -1;
	display: grid;
	justify-items: center;
	margin: 0;
	padding: clamp(34px, 5vw, 64px) 20px;
	border: 1px dashed var(--line-2);
	border-radius: var(--afd-r);
	background: var(--card);
	color: var(--ink-2);
	font-size: 15px;
	line-height: 2;
	text-align: center;
}

/* ========================================================================== */
/* 10 - TABLET AND PHONE                                                       */
/* ========================================================================== */

@media (max-width: 1024px) {
	/* 15 fields = five rows of three; toggle and submit keep the footer row */
	body .ere-advanced-search-wrap .form-search > .row > * { grid-column: span 4; }
	body .ere-advanced-search-wrap .form-search .enable-other-features { grid-column: span 8; }
	body .ere-advanced-search-wrap .form-search > .row > .submit-search-form { grid-column: span 4; }
}

@media (max-width: 767px) {
	body .ere-advanced-search-wrap .form-search > .row > * { grid-column: span 12; }
	/* the short min/max pairs share a line; the long labels ("حد اقل مساحت زمین")
	   need a whole one, or the chosen value is cut off */
	body .ere-advanced-search-wrap .form-search > .row > :has(> :is([name="min-price"], [name="max-price"], [name="min-area"], [name="max-area"])) { grid-column: span 6; }
	body .ere-advanced-search-wrap .form-search > .row > .submit-search-form { grid-column: 1 / -1; justify-self: stretch; }
	body .ere-advanced-search-wrap .form-search .ere-advanced-search-btn { inline-size: 100%; }

	/* The ten secondary fields fold under the plugin's own "other features"
	   toggle (Bootstrap adds .show to its list when opened) — the blueprint's
	   "filters in a collapsible drawer on a phone". Nothing is reordered: opening
	   the drawer shows the missing fields in the plugin's own order, so what is
	   on screen, what Tab visits and what a screen reader reads stay the same
	   (measured: identical at 1440, 768 and 375 with the drawer closed and
	   open). The cost: the toggle sits after the fields it reveals, so it moves
	   down the page when opened. A secondary field the visitor already filled in
	   stays visible, so an active filter is never hidden; without :has() nothing
	   is folded. */
	body .ere-advanced-search-wrap .form-search > .row:not(:has(#ere_search_other_features.show)) >
	:has(> :is([name="title"], [name="address"], [name="bathrooms"], [name="min-area"], [name="max-area"], [name="min-land-area"], [name="max-land-area"], [name="label"], [name="garage"], [name="property_identity"])):not(:has(> select option:checked:not([value=""]))):not(:has(> input:not(:placeholder-shown))) {
		display: none;
	}

	body .ere-advanced-search-wrap .ere-search-status-tab-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body .ere-advanced-search-wrap .ere-search-status-tab button { inline-size: 100%; padding-inline: 8px; }
	body .ere-advanced-search-wrap .other-features-list > .row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
	body .ere-advanced-search-wrap .above-archive-property { align-items: flex-start; }
	body .ere-advanced-search-wrap .ere-property .property-item-content { padding: 14px 16px 16px; }
}

/* ========================================================================== */
/* 11 - REDUCED MOTION — the kit's one sanctioned !important block             */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	body .ere-advanced-search-wrap *,
	body .ere-advanced-search-wrap *::before,
	body .ere-advanced-search-wrap *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	body .ere-advanced-search-wrap .ere-property .property-inner:hover,
	body .ere-advanced-search-wrap .ere-property .property-inner:hover .property-image img,
	body .ere-advanced-search-wrap .form-search .ere-advanced-search-btn:hover { transform: none !important; }
}