/**
 * Listing styles for rentmaine.com.
 *
 * SPECIFICITY NOTE: the theme carries
 *   .interior-container h1,h2,h3,h4,li,p { color:#173251 }
 * at (0,2,1), and loads AFTER this file. A bare .mrem-card__rent (0,1,0) therefore
 * lost twice over -- the price rendered navy instead of maroon. Rules that collide
 * with that declaration are scoped under .interior-container to tie on specificity,
 * and this sheet is enqueued with a dependency on sage/css so the tie resolves here.
 * Measured in the browser, not assumed.
 *
 * Structure follows the pattern already proven on yourmaineplace.com (card grid,
 * facts table, gallery with thumbs, hover lift). Colour does NOT: that site is green
 * (#275a20) and this one is navy + maroon. Importing YMP's palette would make these
 * pages read as a transplant from another brand.
 *
 * Palette taken from the live mrem theme, not invented:
 *   #173251  navy   — headings, links (30 uses in the compiled theme CSS)
 *   #8b2232  maroon — buttons and price (26 uses; it is the theme's .button colour)
 * The theme is Bootstrap-based, so greys reuse Bootstrap's ramp rather than adding a
 * second, slightly-different set.
 */

:root {
	--mrem-navy: #173251;
	--mrem-navy-dk: #0e2136;
	--mrem-maroon: #8b2232;
	--mrem-ink: #212529;
	--mrem-muted: #6c757d;
	--mrem-line: #e2e2e2;
	--mrem-line-soft: #eef0f2;
	--mrem-surface: #fff;
	--mrem-sunk: #f8f9fa;
	--mrem-radius: 6px;
}

/* ---------------------------------------------------------------- card grid */

.mrem-listings {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.75rem 1.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.mrem-card {
	display: flex;
	flex-direction: column;
	background: var(--mrem-surface);
	border: 1px solid var(--mrem-line);
	border-radius: var(--mrem-radius);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}

.mrem-card:hover,
.mrem-card:focus-within {
	box-shadow: 0 6px 18px rgb(23 50 81 / .14);
	transform: translateY(-2px);
}

.mrem-card__media {
	display: block;
	line-height: 0;
	background: var(--mrem-sunk);
}

.mrem-card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* A listing with no photo must still occupy the same grid cell, or the row ragged-edges. */
.mrem-card__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--mrem-sunk);
	color: var(--mrem-muted);
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.mrem-card__body {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1rem 1.15rem 1.2rem;
	flex: 1 1 auto;
}

.interior-container .mrem-card__title {
	font-size: 1.05rem;
	line-height: 1.35;
	margin: 0;
	font-weight: 600;
}

.interior-container .mrem-card__title a {
	color: var(--mrem-navy);
	text-decoration: none;
}

.interior-container .mrem-card__title a:hover,
.interior-container .mrem-card__title a:focus {
	text-decoration: underline;
}

/* Whole-card click target without nesting interactive elements. */
.mrem-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mrem-card { position: relative; }

.interior-container .mrem-card__specs {
	margin: 0;
	color: var(--mrem-muted);
	font-size: .92rem;
}

.interior-container .mrem-card__rent {
	margin: .15rem 0 0;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--mrem-maroon);
	font-variant-numeric: tabular-nums;
}

.interior-container .mrem-card__avail {
	margin: 0;
	font-size: .86rem;
	color: var(--mrem-muted);
}

.mrem-listings-empty {
	margin: 1.5rem 0;
	padding: 1.25rem 1.4rem;
	background: var(--mrem-sunk);
	border-radius: var(--mrem-radius);
}

/* ------------------------------------------------------------ single listing */

.single-rental__header {
	margin-bottom: 1.5rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--mrem-line);
}

.interior-container .single-rental__header h1 {
	margin: 0 0 .4rem;
	color: var(--mrem-navy);
	line-height: 1.15;
}

.interior-container .single-rental__specs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .9rem;
	margin: 0;
	color: var(--mrem-muted);
}

.single-rental__specs .rental-price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--mrem-maroon);
	font-variant-numeric: tabular-nums;
}

/* Separate the metrics without a literal separator character. */
.single-rental__specs > span + span::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: .85em;
	margin-right: .9rem;
	background: var(--mrem-line);
	vertical-align: -.05em;
}

.single-rental__specs .rental-price + span::before { margin-left: 0; }

/* ------------------------------------------------------------------ gallery */
/* Base (no JS): a plain grid of links to the full images. */

.mrem-gallery { margin: 0 0 1.75rem; }

.mrem-gallery__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: .75rem;
}

.mrem-gallery__thumb {
	display: block;
	line-height: 0;
	border-radius: var(--mrem-radius);
	overflow: hidden;
}

.mrem-gallery__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--mrem-sunk);
}

/* Enhanced (JS): stage above a horizontal thumb strip. */

.mrem-gallery__stage {
	position: relative;
	border-radius: var(--mrem-radius);
	overflow: hidden;
	background: #0e1620;
	aspect-ratio: 3 / 2;
}

.mrem-gallery__open {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	position: relative;
}

/* A blurred copy of the photo fills the stage so portrait and landscape shots
   both sit in a fixed box without cropping or bare letterbox bars. */
.mrem-gallery__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(26px) saturate(1.3) brightness(.6);
	transform: scale(1.15);
	pointer-events: none;
}

.mrem-gallery__main {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity .28s ease;
}

.mrem-gallery__main.is-in { opacity: 1; }

.mrem-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / .92);
	color: var(--mrem-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 10px rgb(0 0 0 / .3);
	transition: background .16s ease, transform .16s ease;
}

.mrem-gallery__nav svg { width: 22px; height: 22px; }
.mrem-gallery__nav:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.mrem-gallery__nav--prev { left: .75rem; }
.mrem-gallery__nav--next { right: .75rem; }

.interior-container .mrem-gallery__count {
	position: absolute;
	left: .85rem;
	bottom: .8rem;
	margin: 0;
	background: rgb(0 0 0 / .62);
	color: #fff;
	font-size: .8rem;
	line-height: 1;
	padding: .4rem .62rem;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}

.mrem-gallery__expand {
	position: absolute;
	right: .85rem;
	bottom: .8rem;
	width: 34px;
	height: 34px;
	border-radius: var(--mrem-radius);
	background: rgb(0 0 0 / .62);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.mrem-gallery__expand svg { width: 17px; height: 17px; }

.mrem-gallery.is-enhanced .mrem-gallery__thumbs {
	display: flex;
	gap: .5rem;
	margin-top: .6rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;

	/* overflow-x:auto makes this a scroll container, so overflow-y CANNOT be
	   visible -- the browser computes it to hidden. The active thumb's outline
	   (2px) plus its offset (2px) plus the 2px hover lift therefore need room
	   INSIDE the box, or they are clipped. Measured: headroom was 0px, so the
	   selected thumb's outline was sliced off along its top edge.
	   8px top covers 6px of need with a margin; the extra at the bottom leaves
	   the horizontal scrollbar somewhere to sit. */
	padding: 8px 0 10px;
}

.interior-container .mrem-gallery.is-enhanced .mrem-gallery__thumbs li {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin: 0;
}

.mrem-gallery.is-enhanced .mrem-gallery__thumb {
	width: 104px;
	border-radius: 5px;
	outline: 2px solid transparent;
	outline-offset: 2px;
	opacity: .62;
	transition: outline-color .16s ease, opacity .16s ease, transform .16s ease;
}

.mrem-gallery.is-enhanced .mrem-gallery__thumb:hover,
.mrem-gallery.is-enhanced .mrem-gallery__thumb:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
}

.mrem-gallery.is-enhanced .mrem-gallery__thumb.is-active {
	opacity: 1;
	outline-color: var(--mrem-maroon);
}

/* One photo needs no strip and no arrows. */
.mrem-gallery.is-single .mrem-gallery__thumbs { display: none; }

.mrem-gallery__open:focus-visible { outline: 3px solid var(--mrem-maroon); outline-offset: -3px; }
.mrem-gallery__nav:focus-visible,
.mrem-gallery__thumb:focus-visible { outline: 3px solid var(--mrem-maroon); outline-offset: 2px; }

/* ---------------------------------------------------------------- lightbox */

.mrem-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgb(8 12 18 / .93);
	padding: 3vmin;
}

.mrem-lightbox.is-open { display: flex; }
body.mrem-lightbox-open { overflow: hidden; }

.mrem-lightbox__img {
	max-width: 100%;
	max-height: 94vh;
	object-fit: contain;
	border-radius: 4px;
}

.mrem-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1.15rem;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / .9);
	color: #111;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
}

.mrem-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / .9);
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.mrem-lightbox__nav svg { width: 26px; height: 26px; }
.mrem-lightbox__nav--prev { left: 1.15rem; }
.mrem-lightbox__nav--next { right: 1.15rem; }

/* ------------------------------------------------------- white content panel */

.single-rental__panel {
	background: var(--mrem-surface);
	border: 1px solid var(--mrem-line);
	border-radius: var(--mrem-radius);
	padding: 1.75rem 1.9rem 2rem;
}

/* facts table */
.rental-details {
	width: 100%;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mrem-line);
}

.rental-details li {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	padding: .65rem .25rem;
	border-bottom: 1px solid var(--mrem-line-soft);
}

.interior-container .rental-details li strong {
	flex: 0 0 11rem;
	max-width: 100%;
	color: var(--mrem-muted);
	font-weight: 600;
}

/* amenities */
.rental-amenities { margin: 0 0 1.75rem; }

.interior-container .rental-amenities h2 {
	font-size: 1.15rem;
	color: var(--mrem-navy);
	margin: 0 0 .75rem;
}

.amenity-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.interior-container .amenity-list li {
	padding: .3rem .7rem;
	background: var(--mrem-sunk);
	border: 1px solid var(--mrem-line);
	border-radius: 999px;
	font-size: .88rem;
	color: var(--mrem-ink);
}

/* CTA — the theme's .button is display:block, which would stack these full width */
.rental-cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0 0 2rem;
}

.rental-cta .button {
	display: inline-block;
	width: auto;
	margin-bottom: 0;
}

.rental-cta .button:first-of-type { margin-bottom: 0; }

.rental-enquiry {
	padding-top: 1.5rem;
	border-top: 1px solid var(--mrem-line);
}

.interior-container .rental-enquiry h2 {
	font-size: 1.25rem;
	color: var(--mrem-navy);
	margin: 0 0 1rem;
}

/* ------------------------------------------------------------- facet nav */

.rental-facets {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--mrem-line);
}

.interior-container .rental-facets h2 {
	font-size: 1.05rem;
	color: var(--mrem-navy);
	margin: 0 0 .85rem;
}

.facet-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.interior-container .facet-list li {
	display: flex;
	align-items: baseline;
	gap: .35rem;
	padding: .35rem .8rem;
	background: var(--mrem-surface);
	border: 1px solid var(--mrem-line);
	border-radius: 999px;
	font-size: .9rem;
	transition: border-color .15s ease, background .15s ease;
}

.interior-container .facet-list li:hover { border-color: var(--mrem-navy); background: var(--mrem-sunk); }

.interior-container .facet-list a { color: var(--mrem-navy); text-decoration: none; }
.interior-container .facet-list a:hover { text-decoration: underline; }

.interior-container .facet-count {
	color: var(--mrem-muted);
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- archive intro */

.mrem-archive__intro {
	max-width: 62ch;
	margin: 0 0 1.75rem;
	color: var(--mrem-ink);
}

.interior-container .mrem-archive__intro p { margin-bottom: .9rem; }
.interior-container .mrem-archive__intro p:last-child { margin-bottom: 0; }

/* The live figures line is data, not prose: set it apart so a reader can tell
   what is current inventory and what is standing description. */
.interior-container .mrem-archive__intro .mrem-archive__live {
	margin-top: 1.1rem;
	padding-left: .9rem;
	border-left: 3px solid var(--mrem-line);
	color: var(--mrem-muted);
	font-size: .94rem;
}

/* --------------------------------------------------------------- a11y / motion */

.mrem-card a:focus-visible,
.facet-list a:focus-visible,
.rental-cta .button:focus-visible {
	outline: 2.5px solid var(--mrem-maroon);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mrem-card,
	.facet-list li,
	.mrem-gallery__main,
	.mrem-gallery__thumb,
	.mrem-gallery__nav { transition: none; }
	.mrem-card:hover,
	.mrem-card:focus-within { transform: none; }
}

/* NOTE: these overrides must carry the SAME .interior-container prefix as the rules
   they override. Raising the base rules' specificity to beat the theme silently
   defeated the un-prefixed mobile rules -- the detail label kept reserving 11rem on
   a 375px screen. Caught by measuring flex-basis at mobile width, not by reading. */
@media (max-width: 575px) {
	.mrem-gallery__stage { aspect-ratio: 4 / 3; }
	.mrem-gallery__nav { width: 36px; height: 36px; }
	.mrem-gallery__nav--prev { left: .5rem; }
	.mrem-gallery__nav--next { right: .5rem; }
	.mrem-gallery.is-enhanced .mrem-gallery__thumb { width: 84px; }
	.single-rental__panel { padding: 1.15rem 1.15rem 1.4rem; }
	.interior-container .rental-details li strong { flex-basis: 100%; }
	.rental-cta .button { width: 100%; text-align: center; }
	.interior-container .single-rental__specs > span + span::before { display: none; }
}

/* --------------------------------------------------------------- breadcrumbs */

.mrem-breadcrumbs {
	margin: 0 0 1.25rem;
	font-size: .875rem;
}

.mrem-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .55rem;
}

.interior-container .mrem-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	color: var(--mrem-muted);
}

/* Chevron drawn from borders rather than a glyph, so it never becomes a
   pronounced character in a screen reader. */
.mrem-breadcrumbs li + li::before {
	content: "";
	width: .42em;
	height: .42em;
	flex: none;
	border-right: 1.6px solid #adb5bd;
	border-bottom: 1.6px solid #adb5bd;
	transform: rotate(-45deg);
	margin-right: .1rem;
}

.interior-container .mrem-breadcrumbs a {
	color: var(--mrem-navy);
	text-decoration: none;
}

.mrem-breadcrumbs a:hover { text-decoration: underline; }
.mrem-breadcrumbs [aria-current="page"] { color: var(--mrem-muted); }

/* ------------------------------------------------------- enquiry form fields */
/*
 * The form runs Gravity Forms' LEGACY theme (gform_theme=legacy). The mrem theme
 * does set width and padding on .gform_wrapper .gfield input, but never a BORDER,
 * and GF's formreset.min.css strips the browser default -- so every text field
 * rendered as an invisible white box under a visible label.
 *
 * SPECIFICITY, TWICE OVER. First, the rule that actually governs padding is
 *   .gform_legacy_markup_wrapper input:not([type="radio"]):not([type="checkbox"])...
 * in GF's formsmain.min.css. Each chained :not() carries its argument's
 * specificity, stacking well above a plain class selector, so the selectors below
 * mirror that shape rather than trying to out-order it.
 *
 * Second: having escalated the BASE rule to (0,8,1), a :focus rule written at
 * (0,5,1) lost to it -- our own base rule beat our own focus rule and the focus
 * ring silently never appeared. Every state rule (:focus, .gfield_error) must
 * carry the SAME :not() chain. Both measured in the browser, not reasoned about.
 */

.rental-enquiry .gform_wrapper .gfield,
.rental-enquiry .gform_legacy_markup_wrapper .gfield { margin-bottom: 1.15rem; }

/* The prefilled "Listing" field renders narrower than its siblings because GF
   sizes it from its own field class. Normalise so the column edge is straight. */
.rental-enquiry .gform_wrapper .ginput_container,
.rental-enquiry .gform_legacy_markup_wrapper .ginput_container { width: 100%; max-width: 100%; }

.interior-container .rental-enquiry .gform_wrapper .gfield_label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 600;
	font-size: .95rem;
	color: var(--mrem-navy);
	text-transform: none;
	letter-spacing: 0;
}

.rental-enquiry .gform_wrapper .gfield_required { color: var(--mrem-maroon); }

.rental-enquiry .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]),
.rental-enquiry .gform_legacy_markup_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]),
.rental-enquiry .gform_wrapper select,
.rental-enquiry .gform_legacy_markup_wrapper select,
.rental-enquiry .gform_wrapper textarea,
.rental-enquiry .gform_legacy_markup_wrapper textarea {
	width: 100%;
	max-width: 100%;
	padding: .6rem .75rem;
	border: 1px solid #ced4da;
	border-radius: var(--mrem-radius);
	background: var(--mrem-surface);
	color: var(--mrem-ink);
	font-size: 1rem;
	line-height: 1.5;
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.rental-enquiry .gform_wrapper textarea,
.rental-enquiry .gform_legacy_markup_wrapper textarea { min-height: 9rem; resize: vertical; }

/* Focus ring uses OUTLINE, not border-color plus box-shadow.
   Both of those are contested here -- the base rule sets `border` as a shorthand,
   and GF's own sheets set box-shadow -- whereas nothing in the theme or in Gravity
   Forms sets an outline on a text input. It is also the accessibility-correct
   property: it does not reflow the field the way a border change can.
   NOTE: :focus could not be exercised in the harness used to build this
   (document.hasFocus() was false, so :focus never matched); verify in a real
   browser. */
.rental-enquiry .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]):focus,
.rental-enquiry .gform_legacy_markup_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]):focus,
.rental-enquiry .gform_wrapper select:focus,
.rental-enquiry .gform_legacy_markup_wrapper select:focus,
.rental-enquiry .gform_wrapper textarea:focus,
.rental-enquiry .gform_legacy_markup_wrapper textarea:focus {
	outline: 2.5px solid var(--mrem-navy);
	outline-offset: 1px;
}

.rental-enquiry .gform_wrapper ::placeholder { color: #9aa3ab; }

.rental-enquiry .gform_wrapper .gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]),
.rental-enquiry .gform_legacy_markup_wrapper .gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]),
.rental-enquiry .gform_wrapper .gfield_error textarea,
.rental-enquiry .gform_legacy_markup_wrapper .gfield_error textarea {
	border-color: var(--mrem-maroon);
}

.rental-enquiry .gform_wrapper .validation_message {
	margin-top: .35rem;
	font-size: .85rem;
	color: var(--mrem-maroon);
}

/* Submit: the theme's own button colour, not Bootstrap blue and not the
   browser default the legacy theme falls back to. */
.rental-enquiry .gform_wrapper .gform_footer { margin-top: 1.25rem; }

.rental-enquiry .gform_wrapper .gform_button,
.rental-enquiry .gform_legacy_markup_wrapper .gform_button,
.rental-enquiry .gform_wrapper input[type="submit"],
.rental-enquiry .gform_wrapper button[type="submit"],
.rental-enquiry .gform_legacy_markup_wrapper button[type="submit"] {
	display: inline-block;
	width: auto;
	background-color: var(--mrem-maroon);
	border: 1px solid var(--mrem-maroon);
	color: #fff;
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: .03em;
	padding: .85rem 2rem;
	border-radius: var(--mrem-radius);
	cursor: pointer;
	transition: background-color .15s ease;
}

.rental-enquiry .gform_wrapper .gform_button:hover,
.rental-enquiry .gform_wrapper button[type="submit"]:hover {
	background-color: #6f1b28;
	border-color: #6f1b28;
}

.rental-enquiry .gform_wrapper .gform_button:focus-visible,
.rental-enquiry .gform_wrapper button[type="submit"]:focus-visible {
	outline: 3px solid var(--mrem-navy);
	outline-offset: 2px;
}

@media (max-width: 575px) {
	.rental-enquiry .gform_wrapper .gform_button,
	.rental-enquiry .gform_wrapper button[type="submit"] { width: 100%; }
}

/* --------------------------------------------------------------------- map */

.mrem-map { margin: 0 0 2rem; }

.interior-container .mrem-map h2 {
	font-size: 1.15rem;
	color: var(--mrem-navy);
	margin: 0 0 .75rem;
}

.mrem-map__canvas {
	width: 100%;
	height: 26rem;
	border-radius: var(--mrem-radius);
	border: 1px solid var(--mrem-line);
	background: var(--mrem-sunk);
	overflow: hidden;
}

.mrem-map--single .mrem-map__canvas { height: 16rem; }

.mrem-map__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem 1rem;
	margin: 0 0 .9rem;
	padding: .9rem 1rem;
	background: var(--mrem-sunk);
	border: 1px solid var(--mrem-line);
	border-radius: var(--mrem-radius);
}

.interior-container .mrem-map__filters label {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin: 0;
	font-size: .82rem;
	font-weight: 600;
	color: var(--mrem-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.mrem-map__filters select {
	padding: .45rem .6rem;
	border: 1px solid #ced4da;
	border-radius: var(--mrem-radius);
	background: var(--mrem-surface);
	color: var(--mrem-ink);
	font-size: .95rem;
	font-family: inherit;
	min-width: 8.5rem;
}

.mrem-map__filters select:focus { outline: 2.5px solid var(--mrem-navy); outline-offset: 1px; }

.mrem-map__reset {
	padding: .45rem 1rem;
	border: 1px solid var(--mrem-line);
	border-radius: var(--mrem-radius);
	background: var(--mrem-surface);
	color: var(--mrem-navy);
	font-size: .9rem;
	cursor: pointer;
}

.mrem-map__reset:hover { border-color: var(--mrem-navy); }

.interior-container .mrem-map__count {
	margin: 0 0 0 auto;
	font-size: .9rem;
	color: var(--mrem-muted);
	font-variant-numeric: tabular-nums;
}

.mrem-map__error { padding: 1.5rem; color: var(--mrem-muted); text-align: center; }

/* info window */
.mrem-map__pop { max-width: 240px; }
.mrem-map__pop img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; margin-bottom: .5rem; }
.mrem-map__pop-img { display: block; }
.mrem-map__pop-img:hover img { opacity: .88; }
.mrem-map__pop-title { font-weight: 600; color: var(--mrem-navy); text-decoration: none; line-height: 1.3; display: block; }
.mrem-map__pop-title:hover { text-decoration: underline; }
.mrem-map__pop-meta { margin: .25rem 0 0; font-size: .85rem; color: var(--mrem-muted); }
.mrem-map__pop-rent { margin: .2rem 0 0; font-weight: 700; color: var(--mrem-maroon); }

@media (max-width: 575px) {
	.mrem-map__canvas { height: 20rem; }
	.interior-container .mrem-map__count { margin-left: 0; width: 100%; }
	.mrem-map__filters select { min-width: 0; width: 100%; }
	.interior-container .mrem-map__filters label { flex: 1 1 100%; }
}