/*
 * RentProperty UK — modern front-end styles.
 * Everything is driven by CSS custom properties set from Settings → Appearance,
 * so colours/fonts/radius are configurable without editing this file.
 * Fallback values below keep things sane if the inline vars are missing.
 */

.rpuk {
	--rpuk-primary: #017F01;
	--rpuk-primary-dark: #015F01;
	--rpuk-heading: #0B5D0B;
	--rpuk-accent: #E00000;
	--rpuk-text: #333333;
	--rpuk-muted: #6b7280;
	--rpuk-bg: #f6f7f9;
	--rpuk-card-bg: #ffffff;
	--rpuk-font: Arial, Helvetica, sans-serif;
	--rpuk-radius: 3px;
	--rpuk-shadow: 0 4px 15px rgba(0, 0, 0, .10);
	--rpuk-cols: 3;
	--rpuk-border: #e0e4ed;

	font-family: var(--rpuk-font);
	color: var(--rpuk-text);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}
.rpuk *,
.rpuk *::before,
.rpuk *::after { box-sizing: inherit; }
.rpuk h1, .rpuk h2, .rpuk h3 { line-height: 1.2; }
.rpuk img { max-width: 100%; }
.rpuk :focus-visible { outline: 2px solid color-mix(in srgb, var(--rpuk-primary) 55%, transparent); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.rpuk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	min-height: 46px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--rpuk-radius);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.rpuk-btn:hover { transform: translateY(-2px); }
.rpuk-btn:active { transform: translateY(0); }
.rpuk-btn--primary { background: var(--rpuk-primary); color: #fff; }
.rpuk-btn--primary:hover { background: var(--rpuk-primary-dark); }
.rpuk-btn--ghost { background: #fff; color: var(--rpuk-primary); border-color: color-mix(in srgb, var(--rpuk-primary) 32%, transparent); }
.rpuk-btn--ghost:hover { background: color-mix(in srgb, var(--rpuk-primary) 8%, transparent); }
.rpuk-btn--block { width: 100%; }
.rpuk-btn--lg { padding: .95em 1.7em; font-size: 1rem; }

/* ---------- Grid of cards ---------- */
.rpuk-grid {
	display: grid;
	grid-template-columns: repeat(var(--rpuk-cols), minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 1024px) { .rpuk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .rpuk-grid { grid-template-columns: 1fr; } }

.rpuk-grid--list { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .rpuk-grid--list { grid-template-columns: 1fr; } }

/* ---------- Card ----------
 * Matches the rentukproperty design: square-ish corners, 220px image, green status label
 * top-left, a green address band, then title / price / summary / meta. The whole card is
 * clickable via a stretched title link, so no separate button is rendered.
 */
.rpuk-card {
	position: relative;
	background: var(--rpuk-card-bg);
	border: 1px solid var(--rpuk-border);
	border-radius: var(--rpuk-radius);
	overflow: hidden;
	box-shadow: var(--rpuk-shadow);
	display: flex;
	flex-direction: column;
	transition: transform .22s ease, box-shadow .22s ease;
}
.rpuk-card:hover { transform: translateY(-5px); box-shadow: 0 15px 34px rgba(0, 0, 0, .15); }

.rpuk-card__media {
	position: relative;
	display: block;
	height: 220px;
	overflow: hidden;
	background: #e9edf0;
}
.rpuk-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.rpuk-card:hover .rpuk-card__media img { transform: scale(1.04); }

/* Status label — green, square, top-left. */
.rpuk-card__tag,
.rpuk-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--rpuk-primary);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	padding: 6px 11px;
	border-radius: 0;
}

.rpuk-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.rpuk-card__title { font-size: 1.18rem; margin: 0 0 10px; font-weight: 700; color: #1f2937; }
.rpuk-card__title a { color: inherit; text-decoration: none; }
.rpuk-card__title a:hover { color: var(--rpuk-primary); }
/* Stretch the title link over the whole card so anywhere on it is clickable. */
.rpuk-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
/* Address band — full width under the photo, so the location is the first thing read.
   Solid brand green with white text, as the original rentukproperty card had it. */
.rpuk-card__address {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	padding: 11px 18px;
	background: var(--rpuk-primary);
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.35;
}
.rpuk-card__address .rpuk-ico { color: #fff; opacity: .85; }

/* Price — the amount large in brand red (the original reserved red for price), the period
   small and quiet beside it. */
.rpuk-card__price {
	margin: 0 0 2px;
	display: flex;
	align-items: baseline;
	gap: .35em;
}
.rpuk-card__amount {
	color: var(--rpuk-accent);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
}
.rpuk-card__period {
	color: var(--rpuk-muted);
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}
/* Short description, as the original rentukproperty cards carried. Clamped to 3 lines so a long
   one can't make its card taller than the rest of the row. */
.rpuk-card__summary {
	margin: 10px 0 0;
	font-size: .89rem;
	line-height: 1.55;
	color: var(--rpuk-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rpuk-card__dist { margin-left: .5em; color: var(--rpuk-primary); font-weight: 600; font-size: .82rem; }
.rpuk-card__body .rpuk-btn { margin-top: auto; align-self: flex-start; position: relative; z-index: 4; }

/* ---------- Specs row ---------- */
.rpuk-specs {
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid #e8ebf1;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	color: #5f6881;
	font-size: .84rem;
}
.rpuk-specs li { display: inline-flex; align-items: center; gap: .4em; }
.rpuk-ico { flex: none; color: var(--rpuk-primary); vertical-align: -.2em; }
.rpuk-spec-label { color: var(--rpuk-muted); font-weight: 500; }

/* ---------- Hero / search bar ---------- */
.rpuk-hero {
	position: relative;
	border-radius: var(--rpuk-radius);
	overflow: hidden;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
	color: #fff;
	background: linear-gradient(120deg, color-mix(in srgb, var(--rpuk-primary) 92%, #000) 0%, var(--rpuk-primary) 100%);
}
.rpuk-hero__title { margin: 0 0 .4rem; font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 800; }
.rpuk-hero__sub { margin: 0 0 1.6rem; opacity: .92; font-size: 1.05rem; max-width: 46ch; }

.rpuk-searchbar {
	background: var(--rpuk-card-bg);
	padding: 1rem;
	border-radius: var(--rpuk-radius);
	box-shadow: var(--rpuk-shadow);
}
/* The always-visible line: keyword, beds, max rent, Search. */
.rpuk-searchbar__row,
.rpuk-mapsearch__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem;
}
.rpuk-mapsearch__controls {
	background: var(--rpuk-card-bg);
	padding: 1rem;
	border-radius: var(--rpuk-radius);
	box-shadow: var(--rpuk-shadow);
}
.rpuk-field { display: flex; flex-direction: column; gap: .35rem; min-width: 120px; }
.rpuk-field--grow { flex: 1 1 220px; }
.rpuk-field label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rpuk-muted); }
.rpuk-field input,
.rpuk-field select {
	padding: .7em .85em;
	border: 1px solid #d7dbe0;
	border-radius: 10px;
	font: inherit;
	color: var(--rpuk-text);
	background: #fff;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.rpuk-field input:focus,
.rpuk-field select:focus { outline: none; border-color: var(--rpuk-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rpuk-primary) 18%, transparent); }

/* ---------- Archive header / bar ---------- */
.rpuk-archive { background: var(--rpuk-bg); max-width: 1200px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.rpuk-archive__head { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.5rem; }
.rpuk-archive__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
.rpuk-archive__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.rpuk-count { color: var(--rpuk-text); font-weight: 700; }
.rpuk-count strong { color: var(--rpuk-primary); }
.rpuk-orderby { display: flex; align-items: center; gap: .5rem; }
.rpuk-orderby label { font-size: .8rem; color: var(--rpuk-muted); }
.rpuk-orderby select { padding: .55em .8em; border-radius: 10px; border: 1px solid #d7dbe0; font: inherit; background: #fff; }

.rpuk-empty { color: var(--rpuk-muted); padding: 3rem 0; grid-column: 1 / -1; text-align: center; }

/* ---------- Pagination ---------- */
.rpuk-pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 2.25rem; flex-wrap: wrap; }
.rpuk-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5em; height: 2.5em; padding: 0 .7em;
	border-radius: 10px; text-decoration: none;
	color: var(--rpuk-text); background: #fff; border: 1px solid var(--rpuk-border);
	font-weight: 600; transition: all .12s ease;
}
.rpuk-pagination .page-numbers.current { background: var(--rpuk-primary); color: #fff; border-color: var(--rpuk-primary); }
.rpuk-pagination .page-numbers:hover:not(.current) { border-color: var(--rpuk-primary); color: var(--rpuk-primary); }

/* ---------- Single property ---------- */
.rpuk-single { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.rpuk-breadcrumb { font-size: .85rem; color: var(--rpuk-muted); margin-bottom: 1rem; }
.rpuk-breadcrumb a { color: var(--rpuk-muted); text-decoration: none; }
.rpuk-breadcrumb a:hover { color: var(--rpuk-primary); }
.rpuk-gallery__main { border-radius: var(--rpuk-radius); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--rpuk-shadow); background: #e9edf0; }
.rpuk-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpuk-gallery__thumbs { display: flex; gap: .6rem; margin-top: .65rem; overflow-x: auto; padding-bottom: .25rem; }
.rpuk-gallery__thumb { flex: 0 0 104px; height: 74px; border: 2px solid transparent; border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer; background: none; transition: border-color .12s ease, transform .12s ease; }
.rpuk-gallery__thumb:hover { transform: translateY(-2px); }
.rpuk-gallery__thumb.is-active { border-color: var(--rpuk-primary); }
.rpuk-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.rpuk-single__layout { display: grid; grid-template-columns: 1fr 360px; gap: 2.25rem; margin-top: 1.85rem; }
@media (max-width: 900px) { .rpuk-single__layout { grid-template-columns: 1fr; } }
.rpuk-single__title { margin: 0 0 .25rem; font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; }
.rpuk-single__address { color: var(--rpuk-muted); margin: 0 0 1rem; display: flex; align-items: center; gap: .4em; }
.rpuk-single__price { font-size: 1.7rem; font-weight: 800; color: var(--rpuk-primary); margin-bottom: 1rem; }
.rpuk-single__head .rpuk-specs { font-size: 1rem; padding: 1.1rem 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--rpuk-border); }
.rpuk-single__section { margin-bottom: 2.25rem; }
.rpuk-single__section h2 { font-size: 1.25rem; margin: 0 0 .8rem; font-weight: 700; color: var(--rpuk-heading); }
.rpuk-single__title { color: var(--rpuk-heading); }
.rpuk-single__summary { font-size: 1.08rem; line-height: 1.6; color: var(--rpuk-text); margin: 0 0 1.75rem; padding-left: 1rem; border-left: 3px solid var(--rpuk-primary); }
.rpuk-single__desc { color: #374151; }
.rpuk-single__desc p { margin: 0 0 1rem; }
/* Portal descriptions arrive as pasted HTML — keep stray inline styles from breaking out. */
.rpuk-single__desc img { max-width: 100%; height: auto; }
.rpuk-single__desc * { max-width: 100%; }

/* Photo count badge on the gallery */
.rpuk-gallery__main { position: relative; }
.rpuk-gallery__count {
	position: absolute;
	right: 14px;
	bottom: 14px;
	background: rgba(0, 0, 0, .72);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	padding: 6px 11px;
	border-radius: var(--rpuk-radius);
}

/* Key facts */
.rpuk-facts {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1px;
	background: var(--rpuk-border);
	border: 1px solid var(--rpuk-border);
	border-radius: var(--rpuk-radius);
	overflow: hidden;
}
.rpuk-fact { background: #fff; padding: .85rem 1rem; }
.rpuk-fact dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rpuk-muted); font-weight: 700; margin: 0 0 .25rem; }
.rpuk-fact dd { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--rpuk-heading); }

/* Documents / media links */
.rpuk-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.rpuk-docs a {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .6em 1.1em;
	border: 1px solid var(--rpuk-border);
	border-radius: var(--rpuk-radius);
	color: var(--rpuk-heading);
	font-weight: 700;
	font-size: .9rem;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.rpuk-docs a::before { content: "↗"; color: var(--rpuk-primary); }
.rpuk-docs a:hover { border-color: var(--rpuk-primary); color: var(--rpuk-primary); }
.rpuk-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem .9rem; }
@media (max-width: 560px) { .rpuk-features { grid-template-columns: 1fr; } }
.rpuk-features li { position: relative; padding-left: 1.7rem; color: #374151; }
/* Same drawn tick as the description lists, so the two read as one system. A glyph "✓" was
   used here before; it renders differently per platform and is missing on some. */
.rpuk-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .95rem;
	height: .5rem;
	border-left: 2px solid var(--rpuk-primary);
	border-bottom: 2px solid var(--rpuk-primary);
	transform: rotate(-45deg);
}
.rpuk-staticmap { width: 100%; height: auto; border-radius: var(--rpuk-radius); display: block; }

.rpuk-single__aside { align-self: start; position: sticky; top: 1.5rem; }
.rpuk-enquiry { background: var(--rpuk-card-bg); border: 1px solid var(--rpuk-border); border-radius: var(--rpuk-radius); box-shadow: var(--rpuk-shadow); padding: 1.5rem; }
.rpuk-enquiry h3 { margin: 0 0 .85rem; font-size: 1.2rem; }
.rpuk-price-pill { display: inline-block; background: color-mix(in srgb, var(--rpuk-primary) 10%, transparent); color: var(--rpuk-primary); font-weight: 700; padding: .45em 1em; border-radius: 999px; margin-bottom: 1.1rem; }
.rpuk-enquiry__form { display: flex; flex-direction: column; gap: .65rem; }
.rpuk-enquiry__form input,
.rpuk-enquiry__form textarea { padding: .75em .85em; border: 1px solid #d7dbe0; border-radius: 10px; font: inherit; }
.rpuk-enquiry__form input:focus,
.rpuk-enquiry__form textarea:focus { outline: none; border-color: var(--rpuk-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rpuk-primary) 16%, transparent); }
.rpuk-enquiry__note { font-size: .72rem; color: var(--rpuk-muted); margin: .35rem 0 0; }

/* =========================================================================
   Single property — upmarket pass (2026-08-03)
   Sections become cards on a tinted page, the gallery leads with a mosaic,
   and the enquiry panel carries the price so the CTA is always in view.
   ========================================================================= */

.rpuk-single { --rpuk-page-bg: #f7f8fa; max-width: 1240px; }

/* Staff-only warning on an off-market listing (visitors get a 404). */
.rpuk-single__staffbar {
	background: #fff4e5;
	border: 1px solid #f0c890;
	color: #7a4b06;
	border-radius: var(--rpuk-radius);
	padding: .75rem 1.1rem;
	font-size: .9rem;
	font-weight: 600;
	margin-bottom: 1.1rem;
}

.rpuk-breadcrumb { display: flex; flex-wrap: wrap; gap: .45em; align-items: center; }
.rpuk-breadcrumb__current { color: var(--rpuk-heading); font-weight: 600; }

/* ---------- Gallery ---------- */
/* Explicit height, not aspect-ratio: the main image and the side column each size from the
   other in a stretch grid, which resolved to a gallery about twice as tall as intended. */
.rpuk-gallery--mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: .65rem;
	height: clamp(320px, 38vw, 520px);
}
@media (max-width: 760px) {
	.rpuk-gallery--mosaic { grid-template-columns: 1fr; height: auto; }
}

/* min-height/min-width:0 is load-bearing. A grid item defaults to min-height:auto, so it refuses
   to shrink below its content — and the theme forces `img { height: auto }`, giving the image its
   full intrinsic height. Without this the gallery overflows its row and paints over the page. */
.rpuk-gallery--mosaic .rpuk-gallery__main,
.rpuk-gallery__side,
.rpuk-gallery__sideshot {
	min-height: 0;
	min-width: 0;
}

.rpuk-gallery--mosaic .rpuk-gallery__main { aspect-ratio: auto; height: 100%; }
@media (max-width: 760px) {
	.rpuk-gallery--mosaic .rpuk-gallery__main { aspect-ratio: 16 / 10; }
}

/* Beat the theme's `img { height: auto }` so the crop actually fills its box. */
.rpuk-gallery__main img,
.rpuk-gallery__sideshot img,
.rpuk-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rpuk-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: .65rem; }
@media (max-width: 760px) { .rpuk-gallery__side { display: none; } }
.rpuk-gallery__sideshot {
	padding: 0;
	border: 0;
	background: #e9edf0;
	border-radius: var(--rpuk-radius);
	overflow: hidden;
	cursor: pointer;
	position: relative;
}
.rpuk-gallery__sideshot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.rpuk-gallery__sideshot:hover img { transform: scale(1.05); }

.rpuk-gallery__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--rpuk-primary);
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: var(--rpuk-radius);
}

/* ---------- Body ---------- */
.rpuk-single__head { margin-bottom: 1.5rem; }
.rpuk-single__head .rpuk-specs { border-bottom: 0; border-top: 1px solid var(--rpuk-border); margin-top: 1.1rem; }

.rpuk-single__section {
	background: #fff;
	border: 1px solid var(--rpuk-border);
	border-radius: var(--rpuk-radius);
	padding: 1.6rem 1.75rem;
	margin-bottom: 1.25rem;
}
@media (max-width: 560px) { .rpuk-single__section { padding: 1.25rem 1.1rem; } }

.rpuk-single__section h2 {
	font-size: 1.15rem;
	letter-spacing: -.01em;
	padding-bottom: .8rem;
	margin-bottom: 1.15rem;
	border-bottom: 1px solid var(--rpuk-border);
}

.rpuk-single__summary {
	font-size: 1.12rem;
	line-height: 1.65;
	background: #fff;
	border: 1px solid var(--rpuk-border);
	border-left: 4px solid var(--rpuk-primary);
	border-radius: var(--rpuk-radius);
	padding: 1.15rem 1.4rem;
	margin-bottom: 1.25rem;
}

.rpuk-single__desc { line-height: 1.75; }
/* Structure recovered from the portal's flat text by rpuk_format_portal_description(). */
.rpuk-desc__h {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--rpuk-heading);
	margin: 1.75rem 0 .7rem;
	padding-bottom: .45rem;
	border-bottom: 1px solid var(--rpuk-border);
}
.rpuk-single__desc > .rpuk-desc__h:first-child { margin-top: 0; }
.rpuk-desc__list {
	list-style: none;
	margin: 0 0 1.15rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .45rem 1.4rem;
}
@media (max-width: 620px) { .rpuk-desc__list { grid-template-columns: 1fr; } }
.rpuk-desc__list li { position: relative; padding-left: 1.6rem; line-height: 1.5; }
.rpuk-desc__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .95rem;
	height: .5rem;
	border-left: 2px solid var(--rpuk-primary);
	border-bottom: 2px solid var(--rpuk-primary);
	transform: rotate(-45deg);
}
.rpuk-single__desc p { margin: 0 0 1.05rem; }
.rpuk-single__desc p:last-child { margin-bottom: 0; }
.rpuk-single__desc strong, .rpuk-single__desc b { color: var(--rpuk-heading); }
.rpuk-single__desc ul { margin: 0 0 1.05rem 1.15rem; padding: 0; }
.rpuk-single__desc li { margin-bottom: .35rem; }

.rpuk-single__back { margin: 1.5rem 0 0; }
.rpuk-single__back a { color: var(--rpuk-primary); font-weight: 700; text-decoration: none; }
.rpuk-single__back a:hover { text-decoration: underline; }

/* ---------- Enquiry panel ---------- */
.rpuk-enquiry { padding: 0; overflow: hidden; }
.rpuk-enquiry > *:not(.rpuk-enquiry__head) { margin-left: 1.5rem; margin-right: 1.5rem; }
.rpuk-enquiry > *:last-child { margin-bottom: 1.5rem; }

.rpuk-enquiry__head {
	background: var(--rpuk-heading);
	color: #fff;
	padding: 1.4rem 1.5rem;
	margin-bottom: 1.35rem;
}
.rpuk-enquiry__status {
	display: inline-block;
	background: var(--rpuk-primary);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: var(--rpuk-radius);
	margin-bottom: .7rem;
}
.rpuk-enquiry__price { font-size: 1.75rem; font-weight: 800; line-height: 1.15; }
.rpuk-enquiry__avail { margin: .4rem 0 0; font-size: .87rem; opacity: .82; }
.rpuk-enquiry h3 { margin-top: 0; }
.rpuk-enquiry__phone { font-size: .92rem; color: var(--rpuk-muted); margin-top: 1rem; }
.rpuk-enquiry__phone a { color: var(--rpuk-primary); font-weight: 700; text-decoration: none; }

.rpuk-notice { border-radius: var(--rpuk-radius); padding: .85rem 1rem; font-size: .92rem; margin-bottom: 1rem; }
.rpuk-notice--ok { background: #e8f6ee; border: 1px solid #a9d9bf; color: #16603a; }
.rpuk-notice--error { background: #fdecef; border: 1px solid #f0b3c0; color: #9c1c3c; }
/* "No properties in TS24 - showing the nearest instead". Informational, not an error:
   the results below it are real, they are just further out than asked for. */
.rpuk-notice--wider {
	background: #fff6e6;
	border: 1px solid #f0d3a0;
	color: #7a4c00;
	grid-column: 1 / -1;
}

/* Distance from the searched postcode, opposite the status label. Only rendered during
   a postcode search, where it is also the sort order. */
.rpuk-card__distance {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	background: rgba(7, 24, 79, .82);
	color: #fff;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: .3rem .55rem;
	border-radius: 3px;
	backdrop-filter: blur(2px);
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.rpuk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Archive results map (top of search results) ---------- */
.rpuk-archive__map,
.rpuk-mapsearch__map {
	width: 100%;
	height: 46vh;
	min-height: 340px;
	border-radius: var(--rpuk-radius);
	overflow: hidden;
	box-shadow: var(--rpuk-shadow);
	background: #e9edf0;
}
.rpuk-archive__map { margin-bottom: 1.5rem; }

/* ---------- Map search (map on top, results below) ---------- */
.rpuk-mapsearch { max-width: 1320px; margin: 0 auto; padding: 1rem; }
.rpuk-mapsearch__controls { margin-bottom: 1.1rem; }
.rpuk-mapsearch__split { display: flex; flex-direction: column; gap: 1.35rem; }
.rpuk-mapsearch__map { height: 55vh; min-height: 380px; }
@media (max-width: 980px) { .rpuk-mapsearch__map { height: 50vh; } }
.rpuk-mapsearch__count { font-weight: 700; margin-bottom: .85rem; color: var(--rpuk-text); }
.rpuk-mapsearch__count strong { color: var(--rpuk-primary); }
.rpuk-map-marker { background: var(--rpuk-primary); color: #fff; font-weight: 700; font-size: .8rem; padding: .3em .65em; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.35); border: 2px solid #fff; }

.rpuk-is-loading { opacity: .55; pointer-events: none; }

/* ============================================================
   Leaflet / OpenStreetMap  (map_provider = osm)
   Loaded alongside leaflet.css, which owns the pan/zoom chrome.
   ============================================================ */

/* Leaflet sets its own z-index stack; keep it under sticky headers. */
.leaflet-container { border-radius: var(--rpuk-radius); font: inherit; z-index: 0; }
.leaflet-container a { color: var(--rpuk-primary); }

.rpuk-singlemap { height: 320px; width: 100%; border-radius: var(--rpuk-radius); }

/* Marker: drawn, not an image, so it takes the brand colour and stays sharp. */
.rpuk-pin { background: none; border: 0; }
.rpuk-pin__dot {
	display: block; width: 18px; height: 18px; margin: 2px;
	background: var(--rpuk-primary, #017F01);
	border: 3px solid #fff; border-radius: 50%;
	box-shadow: 0 1px 6px rgba(0,0,0,.4);
	transition: transform .12s ease;
}
.leaflet-marker-icon:hover .rpuk-pin__dot { transform: scale(1.25); }

/* Popup */
.leaflet-popup-content-wrapper { border-radius: var(--rpuk-radius); padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: auto !important; }
.rpuk-pop { display: flex; flex-direction: column; padding: 0 0 .7rem; }
.rpuk-pop__img { width: 100%; height: 110px; object-fit: cover; display: block; margin-bottom: .55rem; }
.rpuk-pop__price { padding: 0 .8rem; color: var(--rpuk-accent, #E00000); font-size: 1.05rem; font-weight: 800; }
.rpuk-pop__title { padding: .1rem .8rem .35rem; color: var(--rpuk-text); font-size: .86rem; line-height: 1.35; }
.rpuk-pop__link { padding: 0 .8rem; font-weight: 700; font-size: .84rem; text-decoration: none; }

/* Address suggestions (Photon) */
.rpuk-field--suggest { position: relative; }
.rpuk-suggest {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 900;
	margin-top: 4px; background: var(--rpuk-card-bg, #fff);
	border: 1px solid #d9dee0; border-radius: var(--rpuk-radius);
	box-shadow: 0 8px 24px rgba(0,0,0,.14); overflow: hidden;
	max-height: 260px; overflow-y: auto;
}
.rpuk-suggest[hidden] { display: none; }
.rpuk-suggest__item {
	display: block; width: 100%; text-align: left; cursor: pointer;
	padding: .55rem .75rem; border: 0; background: none;
	font: inherit; font-size: .88rem; color: var(--rpuk-text);
	border-bottom: 1px solid #eef1f2;
}
.rpuk-suggest__item:last-child { border-bottom: 0; }
.rpuk-suggest__item:hover,
.rpuk-suggest__item.is-active { background: color-mix(in srgb, var(--rpuk-primary) 10%, transparent); }

/* Results column when there is no map to sit beside. */
.rpuk-mapsearch__split--nomap .rpuk-mapsearch__results { width: 100%; }

/* Listings overview map ([rpuk_all_properties map="yes"]) */
.rpuk-listingsmap { max-width: 1320px; margin: 0 auto 1.6rem; padding: 0 1rem; }
.rpuk-listingsmap .rpuk-archive__map { height: 460px; margin-bottom: .55rem; }
@media (max-width: 780px) { .rpuk-listingsmap .rpuk-archive__map { height: 340px; } }
.rpuk-listingsmap__note { margin: 0; font-size: .84rem; color: var(--rpuk-muted); }

/* ---------- Filter panel ----------
 * A <details>, so it works with JavaScript off; the panel opens by itself whenever one of
 * the filters inside it is set, because a filter you cannot see is a filter you cannot clear.
 */
.rpuk-filters { margin-top: .85rem; border-top: 1px solid var(--rpuk-border); }
.rpuk-filters__toggle {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .7rem .2rem .1rem; cursor: pointer; list-style: none;
	font-weight: 700; font-size: .9rem; color: var(--rpuk-primary);
}
.rpuk-filters__toggle::-webkit-details-marker { display: none; }
.rpuk-filters__toggle::after {
	content: ""; width: .5em; height: .5em; margin-left: .15em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-.1em, -.1em); transition: transform .15s ease;
}
.rpuk-filters[open] .rpuk-filters__toggle::after { transform: rotate(-135deg) translate(-.15em, -.15em); }
.rpuk-filters__toggle-less { display: none; }
.rpuk-filters[open] .rpuk-filters__toggle-more { display: none; }
.rpuk-filters[open] .rpuk-filters__toggle-less { display: inline; }

.rpuk-filters__panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1rem 1.5rem;
	padding: 1rem 0 .25rem;
}
.rpuk-filters__block { min-width: 0; }
.rpuk-filters__h {
	margin: 0 0 .55rem; font-size: .72rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .04em; color: var(--rpuk-muted);
}
.rpuk-filters__row { display: flex; flex-wrap: wrap; gap: .75rem; }
.rpuk-filters__row .rpuk-field { flex: 1 1 130px; }
.rpuk-filters__note {
	grid-column: 1 / -1; margin: .25rem 0 0;
	font-size: .8rem; color: var(--rpuk-muted); max-width: 70ch;
}
.rpuk-filters__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .35rem; }

.rpuk-facets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.rpuk-facets label { display: flex; align-items: baseline; gap: .5rem; cursor: pointer; font-size: .92rem; }
.rpuk-facets input { margin: 0; accent-color: var(--rpuk-primary); flex: none; position: relative; top: .12em; }
.rpuk-facet__n { color: var(--rpuk-muted); font-size: .82em; }

/* ---------- Active filter chips ---------- */
.rpuk-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .85rem 0 0; padding: 0; }
.rpuk-chip {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .3rem .6rem; border-radius: 999px; text-decoration: none;
	font-size: .82rem; font-weight: 600; line-height: 1.4;
	color: var(--rpuk-primary); background: color-mix(in srgb, var(--rpuk-primary) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--rpuk-primary) 28%, transparent);
}
.rpuk-chip:hover { background: color-mix(in srgb, var(--rpuk-primary) 16%, #fff); }
.rpuk-chip__x { font-size: 1.05em; line-height: 1; opacity: .75; }
.rpuk-chip--clear { color: var(--rpuk-muted); background: #fff; border-color: var(--rpuk-border); }
.rpuk-chip--clear:hover { color: var(--rpuk-text); background: #fff; }

@media (max-width: 600px) {
	.rpuk-searchbar__row .rpuk-field { flex: 1 1 100%; }
	.rpuk-searchbar__row .rpuk-btn { width: 100%; }
}

/* Narrow screens: a select's intrinsic width is wider than a third of a phone, so the
 * fields have to be allowed to shrink and then told to fill their column. Without this the
 * bathrooms and rent controls hang off the right edge of the panel at 420px. Tick boxes are
 * excluded — a 100%-wide checkbox pushes its own label off the screen. */
.rpuk-filters__row .rpuk-field { min-width: 0; }
.rpuk-filters__panel select,
.rpuk-filters__panel input:not([type="checkbox"]):not([type="radio"]) { width: 100%; max-width: 100%; }

/* The theme resets box-sizing on form controls, so a field set to width:100% came out one
 * padding wider than its column and pushed the whole search card past the viewport on a
 * phone (measured: a 433px column holding a 462px date input). State it here rather than
 * inheriting it. */
.rpuk-field input,
.rpuk-field select { box-sizing: border-box; max-width: 100%; }