/* =========================================================================
   Finney Listings Template — Zillow-style skin for "Listings for AppFolio"
   -------------------------------------------------------------------------
   Layout & interaction patterns are modeled on Zillow's rental search:
     - Pill filter bar across the top
     - Sticky map + scrolling card column (when a map is present)
     - Responsive card grid (image-top, price -> specs -> address stack)
   Colors / fonts / shadows come from the Finney Crossing brand style guide.

   Everything is scoped under `.finney-template`, a wrapper our plugin adds
   around the AppFolio shortcode output, so nothing leaks onto the rest of
   the site and the stock plugin styles are cleanly overridden.
   ========================================================================= */

/* Astra's own .ast-container still boxes this page with its default ~20px
   mobile side padding, stacking underneath this page's own padding. Same
   fix as contact.css / news.css / team.css / leasing-details.css /
   sitemap-map.css / single.css. */
.site-content > .ast-container:has(.finney-template) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.finney-template {
	/* Colors, corners and shadows are the theme's shared tokens from
	   astra-child/style.css :root (--fc-green, --fc-ink, --fc-line,
	   --fc-radius-card, --fc-shadow-rest and the rest). This file declares no
	   brand hex of its own, so a palette change there reaches the listings. */
	--fclt-gap:           20px;

	--fc-font-display: var(--font-display);
	--fc-font-body:    var(--font-body);

	font-family: var(--fc-font-body);
	color: var(--fc-ink);
	display: block;
}

.finney-template *,
.finney-template *::before,
.finney-template *::after {
	box-sizing: border-box;
}

/* The plugin sets the container to inline-block; we want a clean full block. */
.finney-template #apfl-listings-container.main-listings-page {
	display: block;
	width: 100%;
	max-width: 100%;
	/* Contain horizontal overflow without making a scroll container that
	   traps the sticky map and clips the bottom of the listings section. */
	overflow-x: clip;
	overflow-y: visible;
}

/* Full-bleed fallback.
   The plugin already forces Astra's stretched ("page-builder") layout on
   listings pages, but when the shortcode is injected indirectly (e.g. an
   Elementor template we can't statically detect) the theme container may
   still cap the width. These negative margins expand the wrapper to the
   viewport edges — and self-zero when the container is already full width
   (50% - 50vw == 0), so they're harmless in the stretched case. The plugin
   adds the class `is-contained` itself for a single-listing detail view
   (a `lid` in the URL) so that view always stays boxed, even on an
   otherwise full-width grid page. */
.finney-template:not(.is-contained) {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* This full-bleed trick puts the wrapper flush with the viewport edges —
	   there's no buffer left to absorb any stray internal overflow (e.g. a
	   filter pill a few px wider than its grid cell from sub-pixel rounding),
	   so it leaks straight out as a page-level horizontal scrollbar. Contain
	   it here instead of at the overflowing element, which would just clip
	   that element's own visible edge.
	   overflow-x is 'clip', not 'hidden'. Per spec, overflow-y computes to
	   'auto' whenever it's 'visible' AND the other axis is anything but
	   'visible' or 'clip' — declaring overflow-y: visible here doesn't
	   escape that, it still silently becomes 'auto' next to overflow-x:
	   hidden. 'clip' is the one hidden-like value exempt from that
	   conversion, so it's the only way to actually keep overflow-y
	   'visible'. Without it, any sub-pixel height mismatch turned this
	   wrapper (filter bar + map + listings together) into its own
	   barely-scrollable container that swallowed mouse-wheel/trackpad
	   scroll instead of passing it to the page — confirmed live via a
	   headless-browser probe: window.scrollY stayed 0 after a wheel
	   scroll over the filter bar until this was 'clip'. */
	overflow-x: clip;
}

/* Single-listing detail view (`lid` present): stays boxed, so it still needs
   the same scroll-swallowing fix without the full-bleed break-out above. */
.finney-template.is-contained {
	overflow-x: clip;
}

/* =========================================================================
   1. FILTER BAR  (Zillow's top pill bar)
   ========================================================================= */
.finney-template .listing-filters {
	background: var(--fc-white) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--fc-line);
	padding: 32px 20px !important;
	text-align: left;
	/* Hard guarantee against scroll/overflow in this section — belt-and-
	   suspenders on top of the grid-track and .finney-template fixes, so no
	   future sub-pixel rounding in a nested grid can produce a scrollable
	   sliver here again. Both axes, not just overflow-x: per spec, a
	   non-'visible' value on one axis forces the browser to compute the
	   other as 'auto' if it was 'visible' — `overflow-x: hidden` alone was
	   silently turning overflow-y into 'auto', which is what put a vertical
	   scrollbar on this section. Native <select> dropdown lists render in
	   the OS/browser's own top layer regardless of this, and the jQuery UI
	   datepicker popup is appended to <body> — neither is clipped by this. */
	overflow: hidden;
}

/* Apply page only (page ID 25). The other listing pages keep the sharp
   brand-default corners on this bar. */
body.page-id-25 .finney-template .listing-filters {
	border-radius: 8px;
}

.finney-template .listing-filters .apfl_page_hdng,
.finney-template .listing-filters .apfl_page_hdng h1,
.finney-template .listing-filters .apfl_page_hdng h2,
.finney-template .listing-filters .apfl_page_hdng h3,
.finney-template .listing-filters .apfl_page_hdng p {
	color: var(--fc-ink) !important;
	font-family: var(--fc-font-display);
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin: 0 0 4px !important;
	font-weight: 400;
}
.finney-template .listing-filters .apfl_page_hdng h1,
.finney-template .listing-filters .apfl_page_hdng h2,
.finney-template .listing-filters .apfl_page_hdng h3 {
	line-height: 1em;
}

.finney-template .listing-filters .apfl_page_sub_hdng {
	color: var(--fc-warm-gray);
	font-size: 14px;
	margin-bottom: 14px;
}

.finney-template .listing-filters form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 10px 20px;
	/* The AppFolio plugin injects its own inline stylesheet with
	   `.listing-filters form { margin-bottom: 15px }` under
	   `@media (max-width: 1348px)`. Our grid overrides below only run up
	   to 1200px, so 1201-1348px was left with that stray bottom margin
	   uncancelled — it grew the box past its symmetric 18px padding and
	   pushed the row off-center. Cancel it unconditionally (this rule's
	   higher specificity — two classes vs the plugin's one — wins without
	   needing !important) so the row stays centered in the box's padding
	   at every width. */
	margin-bottom: 0;
}
.finney-template .listing-filters form > * {
	/* 'end', not 'center': the field labels below (homepage-style, added
	   above each control) make the labeled items taller than a bare 48px
	   control. Bottom-aligning keeps every control's own edge level with
	   its neighbors regardless of which ones carry a label above them,
	   the same way the homepage search bar's own align-items:end (see
	   .search-bar in assets/home.css) keeps its fields level. */
	align-self: end;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Field labels above each control (Beds, Baths, Min Rent, Max Rent,
   Move-In Date), matching the homepage search bar's .field-group label
   exactly (astra-child/assets/home.css). The custom-select JS (Beds/Baths/
   Min Rent/Max Rent) and fclt_inject_datepicker_label() (Move-In, not JS-
   enhanced) both insert a `.fclt-field-label` as the first child of the
   field's own existing flex/grid item (.cs-wrap or .datepicker) rather
   than adding a new sibling item, so none of the order/grid-column rules
   elsewhere in this file need to change to make room for it. */
.finney-template .fclt-field-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1.8px;
	color: var(--fc-warm-gray);
	margin-bottom: 8px;
	font-weight: 600;
}

/* Reorder the filters to follow the homepage order:
   Beds -> (Baths) -> Move-In -> Min Rent -> Max Rent -> ... -> Search.
   (The homepage's Building filter has no listings-page equivalent; Baths has
   no homepage equivalent, so it stays grouped with Beds.) Flexbox `order`
   reorders visually without touching the plugin's generated markup. */
.finney-template .listing-filters form input[type="search"] { order: 0; }   /* address search */
.finney-template .listing-filters form select[name="filters[bedrooms]"] { order: 10; }
.finney-template .listing-filters form select[name="filters[bathrooms]"] { order: 15; }
.finney-template .listing-filters form .datepicker { order: 20; }           /* move-in */
.finney-template .listing-filters form select[name="filters[market_rent_from]"] { order: 30; }
.finney-template .listing-filters form select[name="filters[market_rent_to]"] { order: 35; }
.finney-template .listing-filters form select.apfl-city-fltr,
.finney-template .listing-filters form select[name="filters[cities][]"] { order: 40; }
.finney-template .listing-filters form select[name="filters[postal_codes][]"] { order: 45; }
.finney-template .listing-filters form select[name="filters[cats]"] { order: 50; }
.finney-template .listing-filters form select[name="filters[dogs]"] { order: 55; }
.finney-template .listing-filters form select#apfl_fltr_type { order: 60; }
.finney-template .listing-filters form select#order_by_fltr { order: 80; } /* sort */
.finney-template .listing-filters form input[type="submit"] { order: 100; }

/* Inputs & dropdowns — thin bottom-border fields, matching the homepage
   search bar (.field-group in astra-child/assets/home.css) exactly: same
   display-serif font/size, same transparent-underline treatment, same
   chevron position. This used to be a bordered/rounded "Zillow pill" look
   instead, which read as a visibly different component from the homepage
   bar; brand fonts/colors are otherwise identical between the two, so the
   mismatch was here, not in the tokens above. */
.finney-template .listing-filters select,
.finney-template .listing-filters input[type="text"],
.finney-template .listing-filters input[type="search"],
.finney-template .listing-filters input[type="date"],
.finney-template .listing-filters .datepicker-field {
	box-sizing: border-box;
	width: auto !important;
	height: 48px;
	min-height: 48px;
	padding: 12px 32px 10px 0 !important;
	font-family: var(--fc-font-display);
	font-size: 17px;
	line-height: 1.25;
	color: var(--fc-ink);
	background: transparent;
	border: none !important;
	border-bottom: 1.5px solid var(--fc-line) !important;
	border-radius: 0 !important;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .2s ease, box-shadow .2s ease;
	vertical-align: middle;
}

.finney-template .listing-filters select {
	padding-right: 32px !important;
	overflow: visible;
	text-overflow: clip;
	color-scheme: light;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A7C3A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
}
/* Windows (Chrome/Edge) renders the native option popup itself and honors
   padding/background-color/color on <option>, unlike macOS which ignores
   them, so the popup looks cramped there without this. Matches the
   homepage's own .field-group select option rule. */
.finney-template .listing-filters select option {
	padding: 10px 14px;
	background-color: var(--fc-white);
	color: var(--fc-ink);
}
.finney-template .listing-filters select[name="filters[market_rent_from]"] {
	min-width: 124px;
}
.finney-template .listing-filters select[name="filters[market_rent_to]"] {
	min-width: 128px;
}
.finney-template .listing-filters select[name="filters[bedrooms]"] {
	min-width: 98px;
}
.finney-template .listing-filters select[name="filters[bathrooms]"] {
	min-width: 102px;
}

/* Branded listbox that replaces the native <select> on fine-pointer (mouse/
   trackpad) devices — see assets/finney-custom-select.js. Same .cs-* pattern
   and now the same underline look as the homepage search bar's own copy
   (astra-child/assets/home.css). Touch devices never run the enhancement
   and keep the native OS picker. */
.finney-template .cs-wrap {
	position: relative;
}
/* finney-custom-select.js copies the select's grid-column and min-width
   inline once, at page load. Those go stale when the viewport crosses a
   breakpoint afterwards (load at desktop, then narrow to ~720px), leaving
   every field one track wide and squeezed into a single row. Place the
   wraps from CSS instead, keyed off the select they hold; !important is
   what beats the inline values. */
.finney-template .listing-filters .cs-wrap {
	grid-column: auto !important;
}
@media (max-width: 1023px) {
	.finney-template .listing-filters .cs-wrap,
	.finney-template .listing-filters .cs-trigger {
		min-width: 0 !important;
	}
}
@media (min-width: 421px) and (max-width: 767px) {
	.finney-template .listing-filters .cs-wrap:has(select[name="filters[bedrooms]"]),
	.finney-template .listing-filters .cs-wrap:has(select[name="filters[bathrooms]"]) {
		grid-column: span 2 !important;
	}
	.finney-template .listing-filters .cs-wrap:has(select[name="filters[market_rent_from]"]),
	.finney-template .listing-filters .cs-wrap:has(select[name="filters[market_rent_to]"]) {
		grid-column: span 3 !important;
	}
}
.finney-template .cs-native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.finney-template .cs-trigger {
	box-sizing: border-box;
	display: inline-block;
	height: 48px;
	min-height: 48px;
	padding: 12px 32px 10px 0 !important;
	font-family: var(--fc-font-display) !important;
	font-size: 17px !important;
	font-weight: normal !important;
	line-height: 30px;
	text-align: left;
	text-transform: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--fc-ink) !important;
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A7C3A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 6px center !important;
	border: none !important;
	border-bottom: 1.5px solid var(--fc-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.finney-template .cs-trigger:hover {
	background-color: transparent !important;
	color: var(--fc-ink) !important;
}
.finney-template .cs-trigger:focus-visible {
	outline: 2px solid var(--fc-green);
	outline-offset: 2px;
}
.finney-template .cs-wrap.is-open .cs-trigger {
	border-bottom-color: var(--fc-green) !important;
}
/* .cs-list-detached, not ".finney-template .cs-list": finney-custom-select.js
   appends the popup straight to <body> (top/left set inline, in viewport
   coordinates) instead of leaving it as a .cs-wrap child, the same escape
   hatch already used below for the jQuery UI datepicker popup — .cs-wrap
   sits inside .listing-filters, which sets overflow:hidden to contain an
   unrelated scroll bug, and that clipped this popup too, leaving it cut off
   and rendering behind the listings/map below instead of floating over
   them. Once detached it's no longer a .finney-template descendant, so
   these rules can't be scoped under that wrapper the way the rest of this
   file's selectors are. */
.cs-list-detached {
	overscroll-behavior-y: contain;
	/* Appended straight to <body>, outside .finney-template. Its colors come
	   from the shared style.css :root tokens, which reach it there too. */
	position: fixed;
	z-index: 99999;
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--fc-white);
	border: 1px solid var(--fc-line);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(31, 36, 25, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
	scrollbar-width: thin;
	scrollbar-color: var(--fc-green) var(--fc-mist);
}
/* Same scrollbar as the homepage search bar list and the map list (.loc-list). */
.cs-list-detached::-webkit-scrollbar { width: 8px; }
.cs-list-detached::-webkit-scrollbar-track { background: var(--fc-mist); }
.cs-list-detached::-webkit-scrollbar-thumb { background: var(--fc-green); border-radius: 4px; }
.cs-list-detached::-webkit-scrollbar-thumb:hover { background: var(--fc-ink); }
.cs-list-detached .cs-option {
	padding: 10px 12px;
	border-radius: 6px;
	font-family: var(--fc-font-display, 'proxima-sera', Georgia, 'Times New Roman', serif);
	font-size: 16px;
	color: var(--fc-ink);
	cursor: pointer;
	white-space: nowrap;
}
.cs-list-detached .cs-option.is-active {
	background-color: var(--fc-green-pale);
}
.cs-list-detached .cs-option.is-selected {
	color: var(--fc-green-dark);
	font-weight: 600;
}

.finney-template .listing-filters input[type="date"],
.finney-template .listing-filters .datepicker-field {
	height: 48px;
	min-height: 48px;
	min-width: 185px !important;
	padding: 12px 34px 10px 0 !important;
	font-family: var(--fc-font-display);
	font-size: 17px;
	line-height: 1.25;
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B6E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 6px center !important;
	background-size: 16px 16px !important;
	border: none !important;
	border-bottom: 1.5px solid var(--fc-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	color-scheme: light;
}
.finney-template .listing-filters input[type="date"]::-webkit-calendar-picker-indicator {
	width: 36px;
	height: 100%;
	margin: 0 -34px 0 0;
	opacity: 0;
	cursor: pointer;
}
.finney-template .listing-filters .datepicker .datepicker-icon {
	display: none !important;
}

.finney-template .listing-filters select:hover,
.finney-template .listing-filters input:hover {
	border-bottom-color: var(--fc-warm-gray) !important;
}

.finney-template .listing-filters select:focus,
.finney-template .listing-filters input:focus {
	outline: none;
	border-bottom-color: var(--fc-green) !important;
	box-shadow: none;
}

.finney-template .listing-filters input[type="search"],
.finney-template .listing-filters input[type="text"] {
	min-width: 220px;
	background-image: none;
	cursor: text;
	padding-right: 8px !important;
}

.finney-template .listing-filters input::placeholder {
	color: var(--fc-warm-gray) !important;
	opacity: 1;
}

.finney-template .listing-filters .datepicker {
	/* 'block', not the old inline-flex: the stock AppFolio stylesheet
	   already absolutely-positions .datepicker-icon inside this box
	   (listings-for-appfolio-pro/css/style.css), and we hide that icon
	   entirely below in favor of the border-bottom field's own calendar
	   glyph, so nothing here actually needs a flex row. Block lets the
	   injected .fclt-field-label (see fclt_inject_datepicker_label())
	   stack above the input instead of sitting beside it, and 'auto'
	   height lets the box grow to fit both instead of clipping the label. */
	display: block;
	width: auto;
	min-width: 200px;
}
/* Make the field fill the wrapper so there's no empty gap (looked like a
   right margin) and it reads as a single field like the others. */
.finney-template .listing-filters .datepicker .datepicker-field {
	width: 100% !important;
	min-width: 0;
}
/* Match the dropdowns' dark text instead of a faint placeholder grey. */
.finney-template .listing-filters .datepicker-field::placeholder {
	color: var(--fc-ink) !important;
	opacity: 1;
}
.finney-template .listing-filters .datepicker .datepicker-icon { color: var(--fc-warm-gray); }

/* Primary search button — matches the homepage's .search-btn exactly
   (astra-child/assets/home.css): same green, size, weight, letter-spacing. */
.finney-template .listing-filters input[type="submit"] {
	box-sizing: border-box;
	min-width: 200px !important;
	height: 48px;
	min-height: 48px;
	margin: 0 !important;
	padding: 14px 32px !important;
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--fc-white);
	background: var(--fc-green) !important;
	border: 1px solid var(--fc-green) !important;
	border-radius: var(--fc-radius-control) !important;
	/* Buttons carry no shadow on the site scale; this clears the one Astra
	   gives every submit input. */
	box-shadow: none !important;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
.finney-template .listing-filters input[type="submit"]:hover {
	background: var(--fc-green-dark) !important;
	border-color: var(--fc-green-dark) !important;
}

@media (min-width: 1024px) and (max-width: 1200px) {
	.finney-template .listing-filters form {
		display: grid;
		/* minmax(0, Npx), not a bare Npx: at the narrow end of this range
		   (~1024-1080px) the six fixed-width tracks + gaps add up to more
		   than the available row width, and a bare px track can't shrink to
		   fit — it just overflows the form, which surfaces as a slice of
		   horizontally-scrollable/hidden content past the visible edge.
		   Track order must match the fields' actual visual order (set by
		   the `order` rules above: Beds -> Baths -> Move-In -> Min Rent ->
		   Max Rent -> Search) — this form has no address-search field, so
		   there's no flexible 1fr track to absorb a mismatch, and a
		   misaligned track just forces a field's own min-width past its
		   column, overflowing into (and hiding behind) the next field. */
		grid-template-columns: minmax(0, 98px) minmax(0, 102px) minmax(0, 200px) minmax(0, 124px) minmax(0, 128px) minmax(0, 130px);
		align-items: center;
		justify-content: center;
		column-gap: 20px;
		row-gap: 0;
		width: min(100%, 1060px);
		margin: 0 auto;
	}
	.finney-template .listing-filters select,
	.finney-template .listing-filters .datepicker,
	.finney-template .listing-filters .datepicker-field,
	.finney-template .listing-filters input[type="submit"] {
		width: 100% !important;
	}
	/* The enhanced select's actual grid item is .cs-wrap (the select itself
	   is hidden inside it), so the rule above never reaches it — stretch the
	   wrap and its visible trigger button to fill the same grid track. */
	.finney-template .cs-wrap {
		width: 100% !important;
	}
	.finney-template .cs-trigger {
		display: block;
		width: 100%;
	}
}

/* Zillow-style datepicker popup shared with the homepage search. */
.ui-datepicker,
.ui-widget.ui-widget-content.ui-datepicker {
	z-index: 99999 !important;
	width: 316px;
	padding: 14px !important;
	border: 1px solid rgba(31, 36, 25, 0.18) !important;
	border-radius: 8px !important;
	background: #fff !important;
	box-shadow: 0 0 0 1px rgba(31, 36, 25, 0.12) inset, 0 12px 32px rgba(31, 36, 25, 0.18) !important;
	font-family: var(--fc-font-body) !important;
	color: var(--fc-ink) !important;
}
.ui-datepicker .ui-datepicker-header,
.ui-datepicker .ui-widget-header {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 36px 10px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--fc-ink) !important;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0;
	color: var(--fc-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 0 !important;
	width: 32px !important;
	height: 32px !important;
	border: 1px solid var(--fc-line) !important;
	border-radius: 50% !important;
	background: #fff !important;
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 0 !important; }
.ui-datepicker .ui-datepicker-next { right: 0 !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
	border-color: var(--fc-green) !important;
	background: rgba(74, 124, 58, 0.08) !important;
	color: var(--fc-green) !important;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: none;
}
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--fc-green);
	border-left: 2px solid var(--fc-green);
}
.ui-datepicker .ui-datepicker-prev::before {
	transform: translate(-35%, -50%) rotate(-45deg);
}
.ui-datepicker .ui-datepicker-next::before {
	transform: translate(-65%, -50%) rotate(135deg);
}
.ui-datepicker table {
	margin: 0 !important;
	border-collapse: separate !important;
	border-spacing: 3px !important;
	border-width: 0px !important;
	font-size: 13px !important;
}
.ui-datepicker th {
	padding: 6px 0;
	color: var(--fc-warm-gray);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}
.ui-datepicker td {
	padding: 0;
	border: 0;
}
.ui-datepicker td span,
.ui-datepicker td a,
.ui-datepicker .ui-state-default,
.ui-datepicker.ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--fc-ink) !important;
	text-align: center;
	text-decoration: none !important;
	font-weight: 400 !important;
}
.ui-datepicker td a:hover,
.ui-datepicker .ui-state-hover,
.ui-datepicker.ui-widget-content .ui-state-hover,
.ui-datepicker .ui-widget-content .ui-state-hover,
.ui-datepicker .ui-state-focus,
.ui-datepicker.ui-widget-content .ui-state-focus {
	background: rgba(74, 124, 58, 0.10) !important;
	color: var(--fc-green-dark) !important;
	border: 0 !important;
}
.ui-datepicker .ui-datepicker-current-day a,
.ui-datepicker .ui-state-active,
.ui-datepicker.ui-widget-content .ui-state-active,
.ui-datepicker .ui-widget-content .ui-state-active,
.ui-datepicker .ui-widget-header .ui-state-active {
	background: var(--fc-green) !important;
	color: #fff !important;
	font-weight: 700 !important;
	border: 0 !important;
}
.ui-datepicker .ui-datepicker-today a,
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-header .ui-state-highlight {
	box-shadow: inset 0 0 0 1px var(--fc-green) !important;
	background: transparent !important;
	color: var(--fc-ink) !important;
	border: 0 !important;
}
.ui-datepicker .ui-datepicker-current-day.ui-datepicker-today a,
.ui-datepicker .ui-datepicker-current-day .ui-state-highlight,
.ui-datepicker .ui-datepicker-current-day .ui-state-active {
	background: var(--fc-green) !important;
	color: #fff !important;
	box-shadow: none !important;
}
.ui-datepicker .ui-datepicker-other-month span,
.ui-datepicker .ui-datepicker-other-month a,
.ui-datepicker .ui-state-disabled span {
	color: rgba(107, 110, 99, 0.38) !important;
}
/* Today / Done button row — identical to the homepage (matches .search-btn).
   Literal hex + !important so it overrides the AppFolio jQuery UI base theme. */
.ui-datepicker .ui-datepicker-buttonpane {
	display: flex !important;
	justify-content: space-between;
	gap: 8px;
	margin: 12px -2px 0 !important;
	padding: 12px 2px 0 !important;
	border-top: 1px solid var(--fc-line) !important;
}
.ui-datepicker .ui-datepicker-buttonpane button,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
	flex: 1 1 0;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 11px 16px !important;
	height: 40px;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	font-family: var(--fc-font-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	opacity: 1 !important;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
/* Primary — Today (matches .search-btn). */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	background: var(--fc-green) !important;
	border-color: var(--fc-green) !important;
	color: #fff !important;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
	background: var(--fc-green-dark) !important;
	border-color: var(--fc-green-dark) !important;
}
/* Secondary — Done (outlined). */
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
	background: #fff !important;
	border-color: var(--fc-green) !important;
	color: var(--fc-green-dark) !important;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:hover {
	background: rgba(74, 124, 58, 0.08) !important;
}

/* =========================================================================
   2. MAP  (sticky map + scrolling card column — Zillow's split view)
   Uses :has() so the split only kicks in when AppFolio rendered a map.
   ========================================================================= */
.finney-template #googlemap {
	width: 100% !important;
	float: none !important;
	height: 360px;
	margin: 0;
	border-radius: 0;
}

@media (min-width: 1025px) {
	.finney-template #apfl-listings-container.main-listings-page:has(#googlemap) {
		display: grid;
		grid-template-columns: minmax(0, 40%) minmax(0, 60%);
		grid-template-rows: auto 1fr;
		align-items: start;
	}
	.finney-template #apfl-listings-container:has(#googlemap) .listing-filters {
		grid-column: 1 / -1;
		grid-row: 1;
	}
		.finney-template #apfl-listings-container:has(#googlemap) #googlemap {
			grid-column: 1;
			grid-row: 2;
			/* Google writes position:relative inline when its tiles initialize. */
			position: sticky !important;
			top: 16px;
			width: 100% !important;
			float: none !important;
			height: calc(100vh - 32px);
			height: calc(100dvh - 32px);
			min-height: 0;
		}
		/* No max-height/overflow-y here: the cards column scrolls with the
		   page, not in its own inner scrollport. This section is full-bleed
		   to the viewport edge, so an inner scrollbar here would render
		   flush against the browser's own — a second, overlapping scrollbar
		   at the same edge. position:sticky on the map (above) is enough on
		   its own to keep the map in view while the page scrolls past the
		   (taller) cards column; no separate scroll container is needed. */
		.finney-template #apfl-listings-container.main-listings-page:has(#googlemap) .all-listings {
			grid-column: 2;
			grid-row: 2;
			align-self: start;
			align-content: start;
			align-items: start;
			padding: 16px !important;
			margin: 0 !important;
			width: auto !important;
			float: none !important;
			max-height: none !important;
			overflow: visible !important;
		}
		#apfl-listings-container.main-listings-page:has(#googlemap) .all-listings {
			width: auto !important;
			float: none !important;
		}
	/* Cards inside the narrower right-hand column. */
	.finney-template #apfl-listings-container:has(#googlemap) .all-listings {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Roomier screens: 3-up cards in the map's right-hand column. Not before
   1800px: under that a third column squeezes the card below the homepage
   card's width, and its street line and spec row start wrapping. */
@media (min-width: 1800px) {
	.finney-template #apfl-listings-container:has(#googlemap) .all-listings {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Hide the map on narrower screens so cards start immediately below filters. */
@media (max-width: 1024px) {
	.finney-template #apfl-listings-container.main-listings-page:has(#googlemap) #googlemap,
	#apfl-listings-container.main-listings-page:has(#googlemap) #googlemap {
		display: none !important;
	}

	.finney-template #apfl-listings-container.main-listings-page:has(#googlemap) .all-listings,
	#apfl-listings-container.main-listings-page:has(#googlemap) .all-listings {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}
}

/* Below the split breakpoint, show the cards 3-up down to phones. */
@media (max-width: 1023px) {
	.finney-template #apfl-listings-container:has(#googlemap) .all-listings {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* Three columns get too narrow for the card's serif street line and its two
   buttons below this, so tablets in portrait get two. */
@media (max-width: 899px) {
	.finney-template #apfl-listings-container:has(#googlemap) .all-listings {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.finney-template #apfl-listings-container:has(#googlemap) .all-listings {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   3. CARD GRID
   ========================================================================= */
.finney-template #apfl-listings-container.main-listings-page .all-listings {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fclt-gap);
	padding: 24px 20px !important;
	margin: 0 !important;
	width: 100%;
	align-content: start;
	/* stretch (not start): cards in a row match the row's tallest card
	   instead of each sizing to its own (shorter) content. .details
	   already has height:100% and .btns already has margin-top:auto, so
	   the extra height just pushes the buttons down, not a stretched gap
	   mid-card. */
	align-items: stretch;
}

@media (max-width: 1199px) {
	.finney-template #apfl-listings-container.main-listings-page .all-listings {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 680px) {
	.finney-template #apfl-listings-container.main-listings-page .all-listings {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Result card: the homepage "Now Leasing" card (home.css .card /
   .listing-card), markup rebuilt by fclt_rebuild_listing_cards(). Selectors
   carry #apfl-listings-container so they outrank the Hawk template's own head
   CSS, which otherwise repaints the card's type in #444 / #666 / #000. The map
   popups clone these cards (finney-map.js), hence the .fclt-map-card twin. */
.finney-template #apfl-listings-container .all-listings .listing-item,
.finney-template #apfl-listings-container .mm-prop-popup .fclt-map-card {
	position: relative;
	width: auto !important;
	min-height: auto;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: var(--fc-white);
	border: 0;
	border-radius: var(--fc-radius-card);
	overflow: hidden;
	box-shadow: var(--fc-shadow-rest);
	transition: box-shadow .3s ease, transform .3s ease;
}
.finney-template #apfl-listings-container .all-listings .listing-item:hover {
	box-shadow: var(--fc-shadow-hover);
	transform: translateY(-4px);
}

/* ---- Photo + availability tag ---------------------------------------- */
.finney-template .listing-item > a { display: block; text-decoration: none; }

.finney-template .listing-item .list-img {
	position: relative;
	overflow: hidden;
}
/* 3:2, the homepage card's photo (360 x 240), at every card width. */
.finney-template .listing-item .list-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.finney-template .listing-item:hover .list-img img {
	transform: scale(1.04);
}
/* Status tag: square, uppercase, top left, as on the homepage cards. */
.finney-template #apfl-listings-container .listing-item .fclt-card-tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	padding: 6px 12px;
	border-radius: 0;
	background: var(--fc-white);
	color: var(--fc-green-dark);
	font-family: var(--fc-font-body);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* ---- Body -------------------------------------------------------------- */
.finney-template #apfl-listings-container .all-listings .details,
.finney-template #apfl-listings-container .mm-prop-popup .details {
	background: var(--fc-white) !important;
	margin-top: 0 !important;
	padding: 22px 22px 24px !important;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.finney-template .listing-item:hover .details { background: var(--fc-white) !important; }
/* AppFolio prints the rent first; the homepage card reads street, specs,
   rent, buttons. */
.finney-template #apfl-listings-container .listing-item .fclt-card-head { order: 1; }
.finney-template #apfl-listings-container .listing-item .fclt-card-specs { order: 2; }
.finney-template #apfl-listings-container .listing-item .fclt-card-price { order: 3; }
.finney-template #apfl-listings-container .listing-item .btns { order: 4; }

/* Street as the serif heading, city/state/zip demoted under it. */
.finney-template #apfl-listings-container .listing-item .fclt-card-street {
	margin: 0 0 6px;
	font-family: var(--fc-font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fc-ink);
}
.finney-template #apfl-listings-container .listing-item .fclt-card-street a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}
.finney-template #apfl-listings-container .listing-item .fclt-card-street a:hover {
	color: var(--fc-green-dark);
}
/* The unit, in the accent face and green, as in the single listing's title
   (.fclt-rf-title-block h1 b in finney-design-refresh.css). */
.finney-template #apfl-listings-container .listing-item .fclt-card-street b {
	font-family: var(--font-accent);
	font-weight: 400;
	color: var(--fc-green);
}
.finney-template #apfl-listings-container .listing-item .fclt-card-city {
	margin: 0 0 16px;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--fc-warm-gray);
}

/* Spec row between two rules, with the single listing's green icons. */
.finney-template #apfl-listings-container .listing-item .details .fclt-card-specs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0 0 18px;
	padding: 14px 0;
	border-top: 1px solid var(--fc-line);
	border-bottom: 1px solid var(--fc-line);
	font-size: 13px;
	line-height: 1.4;
	color: var(--fc-warm-gray);
}
/* Baseline, not center: the bold figure and the regular label are separate
   flex items, and centering their boxes left the figure ~2px above the
   label's baseline. The icon alone is centered. */
.finney-template #apfl-listings-container .listing-item .fclt-card-spec {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}
.finney-template #apfl-listings-container .listing-item .fclt-card-spec strong {
	font-weight: 600;
	color: var(--fc-ink);
}
.finney-template #apfl-listings-container .listing-item .fclt-card-spec svg {
	flex: none;
	align-self: center;
	width: 16px;
	height: 16px;
	color: var(--fc-green);
}

/* Rent: serif figure with a sans "/mo". */
.finney-template #apfl-listings-container .listing-item .fclt-card-price {
	margin: 0 0 18px;
	font-family: var(--fc-font-display);
	font-size: 26px;
	line-height: 1.1;
	color: var(--fc-ink);
}
.finney-template #apfl-listings-container .listing-item .fclt-card-price small {
	margin-left: 4px;
	font-family: var(--fc-font-body);
	font-size: 12.5px;
	color: var(--fc-warm-gray);
}

/* ---- Buttons: site button shape, navy View Details + green Apply ------- */
.finney-template #apfl-listings-container .all-listings .listing-item .btns,
.finney-template #apfl-listings-container .mm-prop-popup .listing-item .btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 0;
	width: 100%;
}
.finney-template #apfl-listings-container .all-listings .listing-item .btns a,
.finney-template #apfl-listings-container .mm-prop-popup .listing-item .btns a {
	flex: 1 1 auto;
	width: auto !important;
	margin: 0 !important;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--fc-radius-control);
	border: none;
	transition: background .2s ease;
}
/* View Details = the homepage card's navy button. */
.finney-template #apfl-listings-container .listing-item .btns a.more_detail_btn {
	background: var(--fc-slate-900) !important;
	color: var(--fc-white) !important;
}
.finney-template #apfl-listings-container .listing-item .btns a.more_detail_btn:hover {
	background: #000 !important;
}
.finney-template #apfl-listings-container .listing-item .btns a.apply_btn {
	background: var(--fc-green) !important;
	color: var(--fc-white) !important;
}
.finney-template #apfl-listings-container .listing-item .btns a.apply_btn:hover {
	background: var(--fc-green-dark) !important;
}

/* Schedule = full-width green */
.finney-template #apfl-listings-container .all-listings .listing-item .btns a.schedule_btn,
.finney-template #apfl-listings-container .mm-prop-popup .listing-item .btns a.schedule_btn {
	flex: 1 1 100%;
	width: 100% !important;
	background: var(--fc-green) !important;
	color: var(--fc-white) !important;
	border-color: var(--fc-green) !important;
}
.finney-template .listing-item .btns a.schedule_btn:hover {
	background: var(--fc-green-dark) !important;
	border-color: var(--fc-green-dark) !important;
}

/* ---- Empty / search states --------------------------------------------- */
.finney-template .no-listings,
.finney-template .search-message {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--fc-warm-gray);
	padding: 40px 16px;
}
.finney-template .no-listings p,
.finney-template .search-message {
	font-family: var(--fc-font-display);
	font-size: 22px;
	line-height: 1.3;
	color: var(--fc-ink);
	margin: 0;
}

/* Waitlist call-to-action shown under the no-results message. */
.finney-template .fclt-waitlist-cta {
	text-align: center;
	margin-top: 20px;
}
/* Matches the homepage hero's .btn.btn-primary (see assets/home.css) so the
   waitlist CTA reads as the same button, not a plugin-styled one-off. */
.finney-template .fclt-waitlist-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	background: var(--fc-green);
	color: var(--fc-white);
	border: 1.5px solid var(--fc-green);
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.finney-template .fclt-waitlist-btn:hover {
	background: var(--fc-green-dark);
	border-color: var(--fc-green-dark);
	transform: translateY(-2px);
}
.finney-template .fclt-waitlist-btn:active {
	transform: translateY(0) scale(0.97);
	transition-duration: .1s;
}

/* No results -> collapse the (empty) map split to a full-width message. */
.finney-template.fclt-no-results #apfl-listings-container.main-listings-page:has(#googlemap) {
	display: block;
}
.finney-template.fclt-no-results #googlemap { display: none !important; }
.finney-template.fclt-no-results #apfl-listings-container .all-listings {
	display: block;
	max-height: none;
	overflow: visible;
	padding: 56px 20px !important;
}

/* =========================================================================
   4. PAGINATION
   ========================================================================= */
.finney-template .apfl-pagination {
	margin: 24px 0;
}
.finney-template .apfl-pagination a,
.finney-template .apfl-pagination a:focus {
	color: var(--fc-ink);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius-control);
	padding: 8px 13px;
	margin: 0 4px;
	text-decoration: none;
}
.finney-template .apfl-pagination a:hover {
	background: var(--fc-mist);
	border-color: var(--fc-warm-gray);
}
.finney-template .apfl-pagination .apfl-current-page {
	background: var(--fc-green) !important;
	border-color: var(--fc-green) !important;
	color: var(--fc-white) !important;
}
.finney-template .apfl-pagination .apfl-current-page:hover {
	background: var(--fc-green-dark) !important;
	color: var(--fc-white) !important;
}

/* =========================================================================
   5. MAP INFO-WINDOW POPUP  (Zillow-style mini property card)
   Renders inside Google's own `.gm-style` DOM, so these are scoped to
   .gm-style. Colors are the shared style.css :root tokens, which reach this
   subtree like any other.
   ========================================================================= */

/* Strip Google's default bubble chrome so our card fills it cleanly. */
.gm-style .gm-style-iw.gm-style-iw-c {
	padding: 0 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 10px 30px rgba(31, 36, 25, 0.22) !important;
	max-width: 340px !important;
}

/* Google POI popups need their native text content padded back in. */
.gm-style .gm-style-iw.gm-style-iw-c:not(:has(.mm-prop-popup)) {
	padding: 16px 18px 18px !important;
	border-radius: 12px !important;
}
.gm-style .gm-style-iw-c .gm-style-iw-d {
	overflow: hidden !important;
	max-height: 64vh;
}
.gm-style .gm-style-iw-c:not(:has(.mm-prop-popup)) .gm-style-iw-d {
	padding-right: 36px !important;
	box-sizing: border-box !important;
}
.gm-style .gm-style-iw-c .gm-style-iw-tc::after { background: #fff; } /* bubble tail */

/* Close (X) button — float it over the image. */
.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
	top: 10px !important;
	right: 10px !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: rgba(31, 36, 25, 0.72) !important;
	box-shadow: 0 2px 8px rgba(31, 36, 25, 0.22) !important;
	opacity: 1 !important;
	z-index: 4 !important;
}
.gm-style .gm-style-iw-c button.gm-ui-hover-effect > span {
	background-color: #fff !important;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	pointer-events: none;
}

/* The card itself */
.gm-style .mm-prop-popup {
	display: block;
	width: 300px;
	font-family: var(--fc-font-body);
	color: var(--fc-ink);
	background: #fff;
}

/* Listing popups share the result card's markup and styles above. */
.gm-style .gm-style-iw.gm-style-iw-c:has(.fclt-map-card) {
	border-radius: var(--fc-radius-card) !important;
	max-width: 360px !important;
}
.gm-style .gm-style-iw-c:has(.fclt-map-card) .gm-style-iw-chr {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
}
.gm-style .gm-style-iw-c:has(.fclt-map-card) .gm-style-iw-d {
	overflow-y: auto !important;
}
.gm-style .mm-prop-popup:has(.fclt-map-card),
.gm-style .fclt-map-slider:has(.fclt-map-card) {
	width: 340px;
	max-width: calc(100vw - 64px);
}
.gm-style .mm-prop-popup .map-popup-thumbnail {
	margin: 0;
	display: block;
}
.gm-style .mm-prop-popup .map-popup-thumbnail img {
	display: block;
	width: 100% !important;
	height: 150px;
	object-fit: cover;
}
.gm-style .mm-prop-popup .map-popup-info {
	padding: 12px 14px 14px;
}
.gm-style .mm-prop-popup .map-popup-rent {
	margin: 0 0 4px !important;
	font-family: var(--fc-font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--fc-ink);
}
.gm-style .mm-prop-popup .map-popup-specs {
	margin: 0 0 2px !important;
	font-size: 13px;
	font-weight: 600;
	color: var(--fc-ink);
}
.gm-style .mm-prop-popup .map-popup-address {
	margin: 0 0 12px !important;
	font-size: 13px;
	color: var(--fc-warm-gray);
	line-height: 1.4;
}
.gm-style .mm-prop-popup .map-popup-info > p:last-child {
	display: flex;
	gap: 8px;
	margin: 0;
}
.gm-style .mm-prop-popup .map-popup-info a.btn {
	flex: 1 1 0;
	text-align: center;
	background: var(--fc-green);
	color: #fff;
	border-radius: 999px;
	padding: 8px 12px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease;
}
.gm-style .mm-prop-popup .map-popup-info a.btn:hover { background: var(--fc-green-dark); }
.gm-style .mm-prop-popup .map-popup-info a.btn.directions-link {
	background: #fff;
	color: var(--fc-green);
	border: 1px solid var(--fc-green);
}
.gm-style .mm-prop-popup .map-popup-info a.btn.directions-link:hover {
	background: rgba(74, 124, 58, 0.08);
}

/* Multiple units on one pin become a Zillow-style mini slider. */
.gm-style .fclt-map-slider {
	position: relative;
	width: 300px;
	background: #fff;
}
.gm-style .fclt-map-slider__viewport {
	width: 100%;
	overflow: hidden;
}
.gm-style .fclt-map-slider__track {
	display: flex;
	width: 100%;
	transition: transform .24s ease;
	will-change: transform;
}
.gm-style .fclt-map-slider__slide {
	flex: 0 0 100%;
	width: 100%;
}
.gm-style .fclt-map-slider__nav {
	position: absolute;
	top: 75px;
	z-index: 3;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(31, 36, 25, 0.14);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2px 8px rgba(31, 36, 25, 0.2);
	color: var(--fc-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.gm-style .fclt-map-slider__nav:hover,
.gm-style .fclt-map-slider__nav:focus {
	background: #fff;
	color: var(--fc-green);
}
.gm-style .fclt-map-slider__nav--prev { left: 8px; }
.gm-style .fclt-map-slider__nav--next { right: 8px; }
.gm-style .fclt-map-slider__count {
	position: absolute;
	top: 122px;
	right: 10px;
	z-index: 3;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(31, 36, 25, 0.72);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

/* =========================================================================
   6. SINGLE LISTING DETAIL — Zillow-style (uses the "Modern" single template)
   In Listings -> Settings set "Single Listing Template" to **Modern** to get
   this layout (gallery hero -> two-column content + sticky contact card).
   ========================================================================= */

/* Outer wrapper: drop the stock card chrome, center to a readable width.
   (The .finney-template wrapper is full-bleed; we re-center the detail.) */
.finney-template .apfl-sl-mdrn-wrapper {
	box-shadow: none !important;
	background: transparent;
	max-width: 1200px;
	margin: 28px auto !important;
	padding: 0 20px;
}

/* ---- Gallery hero ------------------------------------------------------- */
.finney-template .apfl-mdrn-gallery-wrapper {
	border-radius: var(--fc-radius-card);
	overflow: visible;
	margin-bottom: 28px;
}
.finney-template .apfl-gallery {
	/* .apfl-gallery also wraps the thumbnail strip below the hero photo, so its
	   own box is taller than the photo alone — center the arrows on the photo
	   height specifically, not the whole (photo + thumbnails) container. */
	--fclt-gallery-hero-h: clamp(320px, 46vw, 520px);
}
.finney-template .apfl-mdrn-gallery-wrapper .apfl-gallery .mySlides,
.finney-template .apfl-gallery .mySlides {
	max-height: none !important;
}
.finney-template .apfl-gallery .mySlides img {
	height: var(--fclt-gallery-hero-h) !important;
	max-height: none !important;
	width: 100%;
	object-fit: cover;
	border-radius: var(--fc-radius-card);
}
/* The floorplan is a drawing, not a photo: show all of it, letterboxed on
   white, rather than cropping it to fill the frame. */
.finney-template .apfl-gallery .mySlides.fclt-floorplan-slide img,
.finney-template .apfl-gallery .demo.fclt-floorplan-thumb {
	object-fit: contain;
	background: #fff;
}
/* Chips on the photo (count, View Floorplan, View 3D Tour and the phone
   rent chip) share one pill and one type style: the body face at 12px / 600,
   sentence case, on the dark glass. Status stays a square tag instead
   (.fclt-hero-avail in finney-design-refresh.css). */
.finney-template .apfl-gallery .numbertext {
	top: 12px;
	left: 12px;
	z-index: 2;
	width: auto;
	padding: 6px 12px;
	font-family: var(--fc-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--fc-white);
	background: rgba(31, 36, 25, 0.65);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	border-radius: var(--fc-radius-pill);
	box-shadow: var(--fc-shadow-float);
}
/* "View 3D Tour" badge — only rendered when the AppFolio description links to
   a Zillow 3D Home tour (see finney-listing-gallery-reorder.php). Bottom-right
   is the one corner .numbertext (top-left), .fclt-hero-price (bottom-left,
   mobile only) and .fclt-hero-avail (top-right, mobile only) never use, so
   this one rule works unchanged at every breakpoint. Anchored the same way as
   .fclt-hero-price: `bottom` offsets from .apfl-gallery's own bottom edge,
   which sits below the thumbnail row, not the hero photo's — this calc
   converts that to a 12px gap off the photo's bottom edge instead, matching
   .numbertext's edge gap regardless of the badge's own rendered height. */
.finney-template .apfl-gallery .fclt-tour-badge,
.finney-template .apfl-gallery .fclt-floorplan-badge {
	position: absolute;
	right: 12px;
	bottom: calc(100% - var(--fclt-gallery-hero-h) + 12px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--fc-radius-pill);
	color: var(--fc-white);
	background: rgba(31, 36, 25, 0.65);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	font-family: var(--fc-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--fc-shadow-float);
	transition: background .2s ease;
}
.finney-template .apfl-gallery .fclt-tour-badge:hover,
.finney-template .apfl-gallery .fclt-floorplan-badge:hover {
	background: rgba(31, 36, 25, 0.85);
}
.finney-template .apfl-gallery .fclt-tour-badge svg,
.finney-template .apfl-gallery .fclt-floorplan-badge svg {
	display: block;
	width: 14px;
	height: 14px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* "View Floorplan" badge: the tour badge's twin in the bottom-left corner.
   Desktop only, since phones use bottom-left for .fclt-hero-price. Jumps the
   gallery to the floorplan slide (finney-listing-gallery-reorder.php). */
.finney-template .apfl-gallery .fclt-floorplan-badge {
	right: auto;
	left: 12px;
}
@media (max-width: 767px) {
	.finney-template .apfl-gallery .fclt-floorplan-badge { display: none; }
}
.finney-template .apfl-gallery .prev,
.finney-template .apfl-gallery .next {
	top: calc(var(--fclt-gallery-hero-h) / 2);
	transform: translateY(-50%);
	margin-top: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	color: var(--fc-ink);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--fc-shadow-float);
}
.finney-template .apfl-gallery .prev { left: 12px; border-radius: 50%; }
.finney-template .apfl-gallery .next { right: 12px; border-radius: 50%; }
.finney-template .apfl-gallery .prev:hover,
.finney-template .apfl-gallery .next:hover {
	background: var(--fc-white);
	color: var(--fc-green);
}
/* JS (finney-map.js) swaps the plugin's "❮"/"❯" text glyphs for these — an
   SVG centers reliably, where the glyphs' own off-center ink didn't. */
.finney-template .apfl-gallery .prev svg,
.finney-template .apfl-gallery .next svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Thumbnail strip */
.finney-template .apfl-gallery .row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	justify-content: center;
	gap: 6px;
	overflow: visible;
	margin-top: 10px !important;
	padding: 0;
}
.finney-template .apfl-gallery .row::after {
	display: none;
	content: none;
}
.finney-template .apfl-gallery .imgcolumn {
	float: none !important;
	width: auto !important;
	margin: 0;
	min-width: 0;
}
.finney-template .apfl-gallery #image-prvw .demo,
.finney-template .apfl-gallery .imgcolumn .demo {
	display: block !important;
	width: 100%;
	height: 62px;
	margin: 0;
	object-fit: cover;
	border-radius: var(--fc-radius-card);
	opacity: 0.6;
	visibility: visible !important;
	transition: opacity .2s ease, box-shadow .2s ease;
}
.finney-template .apfl-gallery .active,
.finney-template .apfl-gallery .demo:hover {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--fc-green);
}

.finney-template #apfl-kuula-tour h4,
.finney-template #apfl-vdo + * h4 {
	font-family: var(--fc-font-display);
	line-height: 1em;
}

/* ---- Two-column body ---------------------------------------------------- */
.finney-template .apfl-mdrn-content-wrapper {
	padding: 0 !important;
	display: flex;
	align-items: flex-start;
	gap: 36px;
}
/* Left content column = white card on the page background (Zillow style). */
.finney-template .apfl-mdrn-three-fourth {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	background: var(--fc-white);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius-card);
	padding: 28px 30px;
	box-shadow: var(--fc-shadow-rest);
}

/* Header: address + bed/bath summary */
.finney-template .apfl-mdrn-content-header {
	border-bottom: 1px solid var(--fc-line);
	margin-bottom: 24px;
	padding: 0 0 20px;
}
.finney-template .apfl-mdrn-content-header .address-hdng {
	font-family: var(--fc-font-display);
	font-size: 30px;
	line-height: 1.2;
	color: var(--fc-ink);
	margin: 0 0 10px !important;
}
.finney-template .fclt-address-map-link,
.finney-template .address-hdng .header__title__map-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	margin: 0 0 14px;
	padding: 7px 12px;
	border: 1px solid rgba(74, 124, 58, 0.28);
	border-radius: 999px;
	background: rgba(74, 124, 58, 0.1);
	color: var(--fc-green) !important;
	font-family: var(--fc-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none !important;
	text-transform: none;
	vertical-align: middle;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.finney-template .fclt-address-map-link:hover,
.finney-template .address-hdng .header__title__map-link:hover {
	background: rgba(74, 124, 58, 0.16);
	border-color: rgba(74, 124, 58, 0.42);
	color: var(--fc-green-dark) !important;
}
.finney-template .fclt-address-map-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}
.finney-template .fclt-address-map-link__icon svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.finney-template .apfl-mdrn-content-header .bed-bath-std {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--fc-ink);
}
.finney-template .apfl-mdrn-content-header .bed-bath-std img {
	width: 18px;
	height: auto;
	margin: 0 4px;
}
/* JS (finney-map.js) swaps the plugin's bedimg/bathimg raster icons for
   these inline SVGs — same circle-badge style as the "Facts & features"
   icons below (.fclt-extra-icon), sized/colored identically. */
.finney-template .apfl-mdrn-content-header .bed-bath-std .fclt-bedbath-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 2px 0 4px;
	line-height: 0;
	border-radius: 50%;
	color: var(--fc-green);
	background: rgba(74, 124, 58, 0.1);
}
.finney-template .apfl-mdrn-content-header .bed-bath-std .fclt-bedbath-icon svg {
	display: block;
	/* 16, not 15: an odd icon in the 24px chip lands on a half pixel (4.5px
	   each side) and renders visibly off-centre. */
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.finney-template .apfl-mdrn-content-header .bed-bath-std > span:has(#avail-txt) {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	font-size: 0;
	line-height: 1;
	vertical-align: middle;
}
.finney-template .apfl-mdrn-content-header .bed-bath-std > span:has(#avail-txt) .avail-now {
	margin: 0 6px 0 0;
}
.finney-template .apfl-mdrn-content-header #avail-txt {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 12px;
	border: 1px solid rgba(74, 124, 58, 0.28);
	border-radius: 999px;
	background: rgba(74, 124, 58, 0.12);
	color: var(--fc-green);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	vertical-align: middle;
}
.finney-template .apfl-mdrn-content-header .avail-now { width: 18px; }

/* The plugin only prints its generic green check.png ahead of the pill when
   the unit is "Available Now". Hide that image and draw a brand-green check
   inside the pill instead, keyed off the image being there so other
   availability text (a move-in date) stays a plain pill. */
.finney-template .avail-now:has(+ #avail-txt) { display: none; }
.finney-template .avail-now + #avail-txt { gap: 6px; }
.finney-template .avail-now + #avail-txt::before {
	content: '';
	flex: none;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Description + section titles */
.finney-template .apfl-mdrn-content-desc .content-title,
.finney-template .apfl-mdrn-content-desc .desctitle {
	font-family: var(--fc-font-display);
	font-size: 22px;
	font-weight: 400;
	color: var(--fc-ink);
	margin: 8px 0 12px;
}
.finney-template .apfl-mdrn-content-desc .desc {
	font-size: 16px;
	line-height: 1.75;
	color: #2B2F26;
}

/* Facts & features grid */
.finney-template .apfl-mdrn-extra {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--fc-line);
}
.finney-template .apfl-mdrn-extra .extra { column-count: 2; column-gap: 36px; }
.finney-template .apfl-mdrn-extra .extra-half { break-inside: avoid; margin-bottom: 20px; }
.finney-template .apfl-mdrn-extra h4.content-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fc-font-display);
	font-size: 16px;
	line-height: 1em;
	color: var(--fc-ink);
	margin: 0 0 8px;
}
.finney-template .apfl-mdrn-extra ul { list-style: none; margin: 0; padding: 0; }
.finney-template .apfl-mdrn-extra li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: 14px;
	color: var(--fc-warm-gray);
	border-bottom: 1px solid var(--fc-mist);
}
.finney-template .fclt-extra-item {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	line-height: 1.35;
	color: var(--fc-warm-gray);
	border-bottom: 1px solid var(--fc-mist);
	list-style: none;
}
.finney-template .fclt-extra-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 0;
	line-height: 0;
	border-radius: 50%;
	color: var(--fc-green);
	background: rgba(74, 124, 58, 0.1);
}
.finney-template .fclt-extra-icon svg {
	display: block;
	/* 16, not 15: see .fclt-bedbath-icon svg above. The drawing itself is
	   centred per icon by centerIconArtwork() in finney-map.js. */
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Sticky contact / CTA card (right) ---------------------------------- */
.finney-template .apfl-mdrn-one-fourth {
	width: 330px;
	flex: 0 0 330px;
	background: var(--fc-white) !important;
	border: 1px solid var(--fc-line) !important;
	border-radius: var(--fc-radius-card);
	padding: 24px !important;
	box-shadow: var(--fc-shadow-rest);
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
	text-align: left;
}
.finney-template .apfl-mdrn-one-fourth .details-top { text-align: left; display: block; }
.finney-template .apfl-mdrn-one-fourth .details-top > div {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fc-warm-gray);
}
.finney-template .apfl-mdrn-one-fourth .rent-hdng {
	font-family: var(--fc-font-display);
	font-size: 28px !important;
	line-height: 1.1;
	color: var(--fc-ink);
	text-align: left !important;
	border: none !important;
	padding: 0 !important;
	margin: 2px 0 0 !important;
	font-weight: 400;
}

.finney-template .apfl-mdrn-apply-sec { gap: 12px; }
.finney-template .apfl-mdrn-one-fourth .sl-btns {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 13px 18px;
	text-align: center;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	box-sizing: border-box;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* Schedule Showing = primary purple ("Request a tour") */
.finney-template .apfl-mdrn-one-fourth #schshowingBtn {
	background: var(--fc-green) !important;
	color: var(--fc-white) !important;
	border-color: var(--fc-green) !important;
}
.finney-template .apfl-mdrn-one-fourth #schshowingBtn:hover {
	background: var(--fc-green-dark) !important;
	border-color: var(--fc-green-dark) !important;
}
/* Apply Now = green */
.finney-template .apfl-mdrn-one-fourth #applyBtn {
	background: var(--fc-green) !important;
	color: var(--fc-white) !important;
	border-color: var(--fc-green) !important;
}
.finney-template .apfl-mdrn-one-fourth #applyBtn:hover {
	background: var(--fc-green-dark) !important;
	border-color: var(--fc-green-dark) !important;
}
/* Contact = outline */
.finney-template .apfl-mdrn-one-fourth #contactBtn {
	background: var(--fc-white) !important;
	color: var(--fc-green) !important;
	border-color: var(--fc-green) !important;
}
.finney-template .apfl-mdrn-one-fourth #contactBtn:hover {
	background: rgba(74, 124, 58, 0.08) !important;
}

/* Share row + phone + view-all link */
.finney-template .apfl-mdrn-one-fourth .apfl-share-buttons-wrapper {
	justify-content: flex-start;
	gap: 10px;
	margin: 0;
}
.finney-template .apfl-mdrn-one-fourth .apfl-share-buttons {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--fc-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fc-ink);
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.finney-template .apfl-mdrn-one-fourth .apfl-share-buttons:hover {
	background: var(--fc-mist);
	color: var(--fc-green);
	border-color: var(--fc-green);
}
.finney-template .apfl-mdrn-one-fourth > div { font-size: 14px; color: var(--fc-warm-gray); }
.finney-template .apfl-mdrn-one-fourth a:not(.sl-btns):not(.apfl-share-buttons) {
	color: var(--fc-green);
	font-weight: 600;
	text-decoration: none;
}
.finney-template .apfl-mdrn-one-fourth a:not(.sl-btns):not(.apfl-share-buttons):hover {
	text-decoration: underline;
}

/* Mobile rent bar — superseded by the hero photo badges below (see "Mobile
   hero badges", which sets display:none on this at <768px). Colors kept
   here rather than deleted in case a future template variant brings it
   back. */
.finney-template .apfl-mdrn-mob-rent {
	background: var(--fc-ink);
	color: var(--fc-white);
	border-radius: var(--fc-radius-card);
}

/* ---- Mobile hero badges ---- */
/* Price/availability move onto the hero photo instead of the black bar
   between it and the header — built by finney-map.js's enhanceHeroBadges(),
   which moves the plugin's own price node into .apfl-gallery and clones the
   availability text already in .bed-bath-std. Hidden by default (desktop
   keeps the sidebar price card and the inline availability pill); shown only
   <768px, where the black bar and the now-duplicate inline pill are hidden
   instead. */
.finney-template .fclt-hero-price,
.finney-template .fclt-hero-avail {
	display: none;
}
@media (max-width: 767px) {
	/* Match the 16px side padding every other template drops to at this
	   breakpoint (contact, news, team, page-92-alpine, sitemap-map) — this
	   page's wrapper otherwise stays at the desktop 20px. */
	.finney-template .apfl-sl-mdrn-wrapper { padding: 0 16px; }

	.finney-template .apfl-mdrn-mob-rent { display: none; }

	.finney-template .apfl-mdrn-content-header .bed-bath-std > span:has(#avail-txt) {
		display: none;
	}

	.finney-template .fclt-hero-price {
		display: block;
		position: absolute;
		left: 12px;
		/* .fclt-hero-price is appended into .apfl-gallery, which also wraps the
		   thumbnail strip below the hero photo, so a plain `bottom: 12px`
		   anchors to the bottom of that whole box (below the thumbnails) and
		   guessing the pill's own rendered height for a `top` calc is fragile.
		   Anchor from the bottom instead, but offset by the gap between the
		   gallery box's full height and the hero photo's height, so the 12px
		   lands against the photo's bottom edge regardless of pill height. */
		bottom: calc(100% - var(--fclt-gallery-hero-h) + 12px);
		z-index: 2;
		/* The same chip as the photo count and the tour badge. */
		padding: 6px 12px;
		border-radius: var(--fc-radius-pill);
		background: rgba(31, 36, 25, 0.65);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		font-family: var(--fc-font-body);
		font-size: 12px;
		line-height: 1.2;
		font-weight: 600;
		color: var(--fc-white);
		box-shadow: var(--fc-shadow-float);
	}
	.finney-template .fclt-hero-avail {
		display: block;
		position: absolute;
		right: 12px;
		top: 12px;
		z-index: 2;
		background: rgba(31, 36, 25, 0.65);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		color: var(--fc-white);
		font-size: 11px;
		font-weight: 700;
		padding: 5px 11px;
		border-radius: 999px;
	}
}

/* ---- Desktop: sidebar runs alongside the gallery + content, not just the
   content (Zillow-style). `.apfl-mdrn-content-wrapper` is unwrapped with
   `display: contents` so its children (three-fourth/one-fourth) become
   direct items of the outer grid, sitting next to the gallery above. ---- */
@media (min-width: 941px) {
	.finney-template .listing-sec {
		display: grid;
		grid-template-columns: 1fr 330px;
		grid-template-areas:
			"gallery sidebar"
			"content sidebar";
		align-items: start;
		gap: 0 36px;
	}
	.finney-template .apfl-mdrn-gallery-wrapper { grid-area: gallery; margin-bottom: 0; }
	.finney-template .apfl-mdrn-content-wrapper { display: contents; }
	.finney-template .apfl-mdrn-three-fourth { grid-area: content; margin-top: 28px; }
	.finney-template .apfl-mdrn-one-fourth { grid-area: sidebar; }
}

@media (max-width: 940px) {
	.finney-template .apfl-mdrn-content-wrapper { flex-direction: column; }
	.finney-template .apfl-mdrn-three-fourth,
	.finney-template .apfl-mdrn-one-fourth { width: 100%; flex: 1 1 100%; }
	.finney-template .apfl-mdrn-one-fourth { position: static; }
	.finney-template .apfl-mdrn-extra .extra { column-count: 1; }
}

/* Fixed mobile CTA bar (plugin shows these fixed at <768px) — rebrand */
@media (max-width: 767px) {
	.finney-template .apfl-mdrn-one-fourth #applyBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: auto; /* the plugin's own stylesheet sets right:0 here; without
		                this reset both left and right are non-auto and the
		                browser resolves left over right, so the two CTAs
		                collapse onto the same (left) half of the screen. */
		width: 50%;
		z-index: 999;
		border-radius: 0 !important;
		background: var(--fc-green) !important;
	}
	.finney-template .apfl-mdrn-one-fourth #schshowingBtn {
		position: fixed;
		bottom: 0;
		right: 0;
		left: auto; /* plugin stylesheet sets left:0 here — see note above. */
		width: 50%;
		z-index: 999;
		border-radius: 0 !important;
		/* Black/white on this fixed mobile bar specifically, so it reads as the
		   secondary half against Apply Now's green — not the accent color used
		   for the equivalent desktop sidebar button. */
		background: var(--fc-ink) !important;
		color: var(--fc-white) !important;
		border-color: var(--fc-ink) !important;
	}
	/* Barely-there lift off the page: the scrolled header's shadow
	   (style.css, .site-header.is-scrolled), flipped to cast upward. The
	   clip keeps it to the top edge so neither half shades the other at the
	   seam. */
	.finney-template .apfl-mdrn-one-fourth #applyBtn,
	.finney-template .apfl-mdrn-one-fourth #schshowingBtn {
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08) !important;
		clip-path: inset(-24px 0 0 0);
	}
}

/* ---- Classic single template — lighter brand alignment ------------------ */
.finney-template .apfl-sl-wrapper .sl-btns {
	background: var(--fc-green) !important;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-weight: 600;
	transition: background .2s ease;
}
.finney-template .apfl-sl-wrapper .sl-btns:hover { background: var(--fc-green-dark) !important; }
.finney-template .apfl-prmry-btn {
	background: var(--fc-green) !important;
	border-radius: 999px;
}
.finney-template .apfl-prmry-btn:hover { background: var(--fc-green-dark) !important; }
.finney-template .call-top { color: var(--fc-green) !important; }
.finney-template .details-right #avail-txt {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 12px;
	border: 1px solid rgba(74, 124, 58, 0.28);
	border-radius: 999px;
	background: rgba(74, 124, 58, 0.12);
	color: var(--fc-green) !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

	/* =========================================================================
	   7. RESPONSIVE — filter bar on small screens
	   ========================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
	.finney-template .listing-filters {
		padding: 28px 24px !important;
	}
	.finney-template .listing-filters form {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px 12px;
		align-items: center;
		width: min(100%, 760px);
		margin: 0 auto;
	}
	.finney-template .listing-filters select,
	.finney-template .listing-filters input[type="search"],
	.finney-template .listing-filters input[type="text"],
	.finney-template .listing-filters input[type="date"],
	.finney-template .listing-filters .datepicker-field {
		width: 100% !important;
		min-width: 0 !important;
		height: 48px;
		min-height: 48px;
	}
	/* Not in the height-forcing list above: .datepicker now holds a
	   .fclt-field-label above the (still 48px) .datepicker-field, so it
	   needs to grow taller, not get clamped back to 48px. */
	.finney-template .listing-filters .datepicker {
		width: 100% !important;
		min-width: 0 !important;
	}
	.finney-template .listing-filters .datepicker,
	.finney-template .listing-filters input[type="date"],
	.finney-template .listing-filters .datepicker-field {
		grid-column: span 2;
	}
	.finney-template .listing-filters input[type="submit"] {
		grid-column: span 2;
		justify-self: stretch;
		width: 100% !important;
		height: 48px;
		min-height: 48px;
	}
	/* The enhanced select's actual grid item is .cs-wrap (see the 1024-1200px
	   breakpoint above for why) — .style.gridColumn set by
	   finney-custom-select.js already carries over the select's own span, so
	   only width needs restating here. */
	.finney-template .cs-wrap {
		width: 100% !important;
	}
	.finney-template .cs-trigger {
		display: block;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.finney-template .listing-filters {
		padding: 22px 14px 24px !important;
	}
	.finney-template .listing-filters form {
		display: grid;
		/* 6 columns so Beds/Baths/Move-In can each take an even third of one
		   row (span 2) while Min Rent/Max Rent share the next row as even
		   halves (span 3) — a plain 2-column grid can't express both a
		   3-across and a 2-across row at once. */
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 10px;
		align-items: stretch;
		justify-content: stretch;
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}
	.finney-template .listing-filters select,
	.finney-template .listing-filters input[type="search"],
	.finney-template .listing-filters input[type="text"],
	.finney-template .listing-filters input[type="date"],
	.finney-template .listing-filters .datepicker-field {
		width: 100% !important;
		min-width: 0 !important;
		height: 48px;
		min-height: 48px;
	}
	/* Not in the height-forcing list above: see the same note on the
	   768-1023px breakpoint. */
	.finney-template .listing-filters .datepicker {
		width: 100% !important;
		min-width: 0 !important;
	}
	.finney-template .listing-filters select[name="filters[bedrooms]"],
	.finney-template .listing-filters select[name="filters[bathrooms]"],
	.finney-template .listing-filters .datepicker,
	.finney-template .listing-filters input[type="date"],
	.finney-template .listing-filters .datepicker-field {
		grid-column: span 2;
	}
	.finney-template .listing-filters select[name="filters[market_rent_from]"],
	.finney-template .listing-filters select[name="filters[market_rent_to]"] {
		grid-column: span 3;
	}
	.finney-template .listing-filters input[type="submit"] {
		grid-column: 1 / -1;
		justify-self: center;
		width: min(100%, 220px) !important;
		height: 48px;
		min-height: 48px;
		margin-top: 2px !important;
	}
	/* The enhanced select's actual grid item is .cs-wrap (see the
	   1024-1200px breakpoint above) — its grid-column is already carried
	   over inline by finney-custom-select.js, so only width needs restating
	   here. */
	.finney-template .cs-wrap {
		width: 100% !important;
	}
	.finney-template .cs-trigger {
		display: block;
		width: 100%;
	}
}

@media (max-width: 420px) {
	.finney-template .listing-filters form {
		grid-template-columns: 1fr;
		max-width: 340px;
	}
	.finney-template .listing-filters select[name="filters[bedrooms]"],
	.finney-template .listing-filters select[name="filters[bathrooms]"],
	.finney-template .listing-filters select[name="filters[market_rent_from]"],
	.finney-template .listing-filters select[name="filters[market_rent_to]"],
	.finney-template .listing-filters .datepicker,
	.finney-template .listing-filters input[type="date"],
	.finney-template .listing-filters .datepicker-field,
	.finney-template .listing-filters input[type="submit"] {
		grid-column: auto;
		width: 100% !important;
	}
}

/* =========================================================================
   6. LISTINGS PAGE HEADER
   -------------------------------------------------------------------------
   Sits above `.finney-template` (added to the page's own content, not the
   AppFolio shortcode output).

   The styling for it is no longer here. It moved to the theme's shared page
   header — astra-child/assets/page-header.css — which styles the
   `.fclt-listings-*` classes as an alias for `.fc-page-header`, so this block
   stops being a fifth private copy of a composition every other templated
   page also builds. The markup keeps its existing classes because it is
   authored into each listing page's post_content rather than rendered by a
   template, so there is nothing here to change it from.

   Only the visibility rule stays, because that one is about this plugin's
   own behaviour rather than about type.
   ========================================================================= */
/* Hidden when a single listing is open via ?lid= — see the `fclt-single-listing`
   body class in astra-child/functions.php. */
body.fclt-single-listing .fclt-listings-header { display: none; }

/* =========================================================================
   7. MOBILE FILTER TOGGLE
   -------------------------------------------------------------------------
   Below 767px the filter form is five-plus stacked full-width fields, which
   pushes the first listing card a full screen or more down. Collapse the
   fields behind a "Filters" toggle so a listing is visible without
   scrolling past the whole form first. Desktop/tablet are untouched — the toggle button and
   panel-collapsing rules only apply under the same 767px breakpoint the
   stacked layout already uses.
   ========================================================================= */
.fclt-filters-toggle { display: none; }

@media (max-width: 767px) {
	.finney-template .listing-filters form { padding-top: 4px; }

	/* A quiet disclosure chip, not a filled CTA button — !important defeats
	   Astra's global button skin (button{background:...}), which otherwise
	   paints this solid brand-accent like a primary action. */
	.fclt-filters-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100% !important;
		max-width: 220px;
		margin: 4px auto 0 !important;
		height: 44px !important;
		padding: 0 20px !important;
		background: var(--fc-white) !important;
		border: 1.5px solid var(--fc-line) !important;
		border-radius: 3px !important;
		font-family: var(--fc-font-body) !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		letter-spacing: 1px !important;
		text-transform: uppercase !important;
		color: var(--fc-ink) !important;
		cursor: pointer;
		box-shadow: none !important;
	}
	.fclt-filters-toggle:hover {
		border-color: var(--fc-green) !important;
		color: var(--fc-green-dark) !important;
	}
	.fclt-filters-toggle[aria-expanded="true"] {
		border-color: var(--fc-green) !important;
		color: var(--fc-green-dark) !important;
	}
	.fclt-filters-toggle svg {
		width: 14px;
		height: 14px;
		transition: transform .2s ease;
	}
	.fclt-filters-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

	/* Plain show/hide, no height animation. The previous grid-template-rows
	   0fr->1fr trick animates through intermediate heights shorter than the
	   form's natural content height while the form sits under overflow-y:
	   hidden; browsers can register that mid-transition overflow as a real
	   scrollable region on the panel, which then keeps eating mouse-wheel /
	   trackpad scroll instead of letting it bubble to the page scroll — the
	   "scrolling area over the filters" bug. display:none has no in-between
	   state, so there's nothing for a scroll container to ever attach to. */
	.fclt-filters-panel { display: none; }
	.fclt-filters-panel.is-open { display: block; }
	.fclt-filters-panel.is-open > form { padding-top: 14px !important; }
}

/* ---------------------------------------------------------------------------
   3D tour modal
   The gallery badge is a button now (see finney-listing-gallery-reorder.php),
   so it needs the usual button resets on top of the badge rules further up.
   The dialog itself is fixed-position, so it doesn't need the .apfl-gallery
   scoping the badge has.
   ------------------------------------------------------------------------- */
.finney-template .apfl-gallery button.fclt-tour-badge,
.finney-template .apfl-gallery button.fclt-floorplan-badge {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	line-height: 1.2;
}

body.fclt-tour-open {
	overflow: hidden;
}

.fclt-tour-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.fclt-tour-modal[hidden] { display: none; }

.fclt-tour-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 36, 25, 0.72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .2s ease;
}
.fclt-tour-modal.is-open .fclt-tour-modal__backdrop { opacity: 1; }

.fclt-tour-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1180px, 100%);
	height: min(82vh, 820px);
	overflow: hidden;
	background: var(--fc-ink);
	border-radius: var(--fc-radius-stage);
	box-shadow: 0 24px 60px rgba(31, 36, 25, 0.45);
	opacity: 0;
	transform: translateY(12px) scale(.985);
	transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.fclt-tour-modal.is-open .fclt-tour-modal__panel {
	opacity: 1;
	transform: none;
}

.fclt-tour-modal__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	padding: 12px 14px 12px 20px;
	color: var(--fc-white, #fff);
	background: rgba(255, 255, 255, 0.06);
}
.fclt-tour-modal__title {
	font-family: var(--fc-font-body, sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: none;
}
/* Underline comes from text-decoration only: the theme underlines links on its
   own, so a border-bottom here would read as a second rule under the text. */
a.fclt-tour-modal__out {
	margin-left: auto;
	font-family: var(--fc-font-body, sans-serif);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.78);
	border-bottom: 0;
	text-decoration: underline !important;
	text-decoration-color: rgba(255, 255, 255, 0.35) !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s ease, text-decoration-color .2s ease;
}
a.fclt-tour-modal__out:hover {
	color: var(--fc-white, #fff);
	text-decoration-color: var(--fc-white, #fff) !important;
}
.fclt-tour-modal__close {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--fc-white, #fff);
	background: rgba(255, 255, 255, 0.12);
	transition: background .2s ease;
}
.fclt-tour-modal__close:hover { background: rgba(255, 255, 255, 0.24); }
.fclt-tour-modal__close svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.fclt-tour-modal__stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	background: #101410;
}
.fclt-tour-modal__status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 28px;
	text-align: center;
	font-family: var(--fc-font-body, sans-serif);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
}
.fclt-tour-modal__status[hidden] { display: none; }
.fclt-tour-modal__frame {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.fclt-tour-modal { padding: 0; }
	.fclt-tour-modal__panel {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fclt-tour-modal__backdrop,
	.fclt-tour-modal__panel {
		transition: none;
	}
}

/* ---- Full-screen photo viewer: close button ------------------------------
   The AppFolio plugin's viewer (js/main.js, .apfl_full_pp) prints its close
   "x" before the slides with no stacking order, so any photo that reaches the
   top-right corner paints over it, and a bare white icon disappears on a
   bright sky anyway. Keep it above the slides and the prev/next arrows, pinned
   to the viewport (clear of the iPhone notch), on a dark chip that reads over
   any photo. The viewer is appended to <body>, outside .finney-template, so
   these selectors aren't scoped to it. */
.apfl_full_pp .close_apfl_pp {
	position: fixed !important;
	top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
	right: calc(env(safe-area-inset-right, 0px) + 14px) !important;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(31, 36, 25, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.apfl_full_pp .close_apfl_pp:hover { background: rgba(31, 36, 25, 0.92); }
.apfl_full_pp .close_apfl_pp svg {
	display: block;
	width: 26px;
	height: 26px;
}

/* ---- Card entrance --------------------------------------------------- */
/* Same rise, scale and unblur as the homepage amenity cards (astra-child
   home.css), 0.7s instead of 0.9s. html.fclt-reveal is set from the head and
   assets/finney-card-reveal.js adds .fclt-in as each card scrolls into view,
   then .fclt-done once it has landed, which drops back to the hover
   transition above. Off entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html.fclt-reveal .finney-template #apfl-listings-container .all-listings .listing-item:not(.fclt-done) {
		transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
		            transform .7s cubic-bezier(.16, 1, .3, 1),
		            filter .7s cubic-bezier(.16, 1, .3, 1);
		will-change: transform, opacity, filter;
	}
	html.fclt-reveal .finney-template #apfl-listings-container .all-listings .listing-item:not(.fclt-in) {
		opacity: 0;
		transform: translateY(42px) scale(.94);
		filter: blur(10px);
	}
}