/* /web_list/assets/listing.css — page-unique styles for the listing page (UI v1).
 * Everything generic lives in /ui/*.css; tokens only, no raw hex/px (rule: web/ui/README.md).
 * Covers: the ?search= banner, the subscription modal internals, the mini map. */

.rp-search-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rp-s3);
	margin-top: var(--rp-s4);
	padding: var(--rp-s3) var(--rp-s4);
	background: var(--rp-surface);
	border: 1px solid var(--rp-border);
	border-radius: var(--rp-r-lg);
	font-size: var(--rp-fs-14);
}

/* Priority-search CTA note under the card price. */
.rp-cta-note { margin-top: var(--rp-s1); font-size: var(--rp-fs-12); color: var(--rp-text-2); }

/* Subscription modal internals (the shell is .rp-modal-backdrop / .rp-modal). */
.interest-summary {
	margin-top: var(--rp-s3);
	padding: var(--rp-s3) var(--rp-s4);
	background: var(--rp-surface);
	border: 1px solid var(--rp-border);
	border-radius: var(--rp-r-lg);
	font-size: var(--rp-fs-14);
	line-height: var(--rp-lh);
}
.interest-item { margin-top: var(--rp-s1); }

.duration-buttons { display: flex; gap: var(--rp-s2); }
.duration-btn.is-active { background: var(--rp-ink); color: var(--rp-bg); border-color: transparent; }

.subscription-pricing { margin-top: var(--rp-s4); font-size: var(--rp-fs-17); font-weight: 800; }
.subscription-guarantee { margin-top: var(--rp-s2); font-size: var(--rp-fs-13); color: var(--rp-text-2); }

.search-area-map { margin-top: var(--rp-s4); }
.search-area-map .map-container { border-radius: var(--rp-r-lg); overflow: hidden; }
.search-area-map .map-info { margin-top: var(--rp-s2); font-size: var(--rp-fs-13); color: var(--rp-text-2); }
.rp-minimap-fallback { position: relative; width: 100%; border-radius: var(--rp-r-lg); overflow: hidden; background: var(--rp-surface); }

/* [2026-09-05] Market snapshot (web_shared/market_snapshot.php): four figures, then chips by
 * bedrooms and by district. Chips are links into the filtered listing, so they double as
 * internal links with real anchor text. */
.rp-market { margin-top: var(--rp-s10); padding-top: var(--rp-s8); border-top: 1px solid var(--rp-border); }
.rp-market .rp-section-head { margin-bottom: var(--rp-s4); }
.rp-market-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--rp-s3); margin-bottom: var(--rp-s6); }
.rp-market-stat { background: var(--rp-surface); border-radius: var(--rp-r-lg); padding: var(--rp-s4); display: flex; flex-direction: column; gap: 2px; }
.rp-market-stat b { font-size: var(--rp-fs-20); font-weight: 800; letter-spacing: -0.02em; color: var(--rp-ink); font-variant-numeric: tabular-nums; }
.rp-market-stat span { font-size: var(--rp-fs-13); color: var(--rp-text-2); }
.rp-market .rp-label { margin: var(--rp-s5) 0 var(--rp-s2); }
.rp-market-row { display: flex; flex-wrap: wrap; gap: var(--rp-s2); }
.rp-market-chip { display: inline-flex; align-items: baseline; gap: var(--rp-s2); padding: var(--rp-s2) var(--rp-s3); border: 1px solid var(--rp-border); border-radius: var(--rp-r-lg); font-size: var(--rp-fs-14); color: var(--rp-text); background: var(--rp-bg); transition: border-color var(--rp-t-fast); }
.rp-market-chip:hover { border-color: var(--rp-ink); }
.rp-market-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-market-chip small { font-size: var(--rp-fs-12); color: var(--rp-text-2); }

/* [2026-09-05] "Recommended for you" row above the catalogue (fed by the view matrix). */
.rp-reco { padding-top: var(--rp-s6); }
.rp-reco .rp-section-head { margin-bottom: var(--rp-s4); }