/**
 * The contact form, once it moved into WPForms.
 *
 * Same design as the hand-rolled form this replaced: the rules below are the
 * `.fc-contact__form` block from contact.css, retargeted at the markup WPForms
 * renders. WPForms' own stylesheet is switched off on this page
 * (inc/wpforms-contact.php filters `disable-css` to 3), so there is nothing to
 * outspecify here except the Elementor kit, which is why the field and button
 * declarations carry !important the same way contact.css does.
 *
 * Field ids referenced by class:
 *   .fc-field       every field, so the panel can scope to our own fields only
 *   .fc-half        first name / last name / email / phone, two per row
 *   .fc-tour-field  the AppFolio unit picker, shown only in tour mode
 *   .fc-optional    phone, whose label carries the "(optional)" note
 */

/* ============ WHAT THE PLUGIN STYLESHEET WOULD HAVE HIDDEN ============ */

/* Switching WPForms' stylesheet off takes its hiding utilities with it, and
   these are not decorative: .wpforms-field-hp is the honeypot, rendered as a
   real text input labelled "Message", and .wpforms-hidden carries the
   screen-reader-only half of every error message. Left alone, both render as
   visible content in the panel. Same declarations the plugin's own full
   stylesheet uses.

   The v3 anti-spam field hides itself with an inline <style> the plugin
   injects per form, so it needs nothing here. */
.fc-contact__panel .wpforms-field-hp {
	display: none !important;
	position: absolute !important;
	left: -9000px !important;
}

.fc-contact__panel .wpforms-hidden {
	display: none !important;
}

/* ============ CONTAINER ============ */

.fc-contact__panel .wpforms-container {
	margin: 0;
}

.fc-contact__panel .wpforms-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* The two-up rows the old markup built with .fc-contact__row. A grid rather
   than nested wrappers because conditional logic hides fields individually,
   and a hidden grid item collapses cleanly while a half-empty flex row would
   not. */
.fc-contact__panel .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 20px;
	align-items: start;
}

.fc-contact__panel .wpforms-field {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 0;
}

.fc-contact__panel .wpforms-field.fc-half {
	grid-column: span 1;
}

/* ============ LABELS ============ */

/* Same uppercase micro-label the homepage search bar uses. */
.fc-contact__panel .wpforms-field-label {
	display: block;
	margin: 0;
	font-family: var(--font-body);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(31, 36, 25, 0.72);
}

/* Sized against the 10px label it sits in, so it reads as a marker, not a speck. */
.fc-contact__panel .wpforms-required-label {
	margin-left: 2px;
	font-size: 16px;
	font-weight: 700;
	line-height: 0;
	letter-spacing: 0;
	vertical-align: -3px;
	color: var(--green);
	border: 0;
	text-decoration: none;
}

/* The old markup spelled this out in the label itself. */
.fc-contact__panel .fc-optional .wpforms-field-label::after {
	content: ' (optional)';
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: rgba(31, 36, 25, 0.4);
}

.fc-contact__panel .wpforms-field-sublabel {
	display: none;
}

/* ============ CONTROLS ============ */

/* The Elementor kit ships
   `.elementor-kit-99 input:not([type="button"]):not([type="submit"])` with its
   own font, color and border, which outspecifies a plain class selector here.
   It does not reach `textarea`/`select`, so without !important only the text
   inputs would pick up the kit's styling instead of this form's own. Same
   override pattern contact.css and home.css already use against this kit. */
.fc-contact-template .fc-contact__panel .wpforms-field input[type='text'],
.fc-contact-template .fc-contact__panel .wpforms-field input[type='email'],
.fc-contact-template .fc-contact__panel .wpforms-field input[type='tel'],
.fc-contact-template .fc-contact__panel .wpforms-field select,
.fc-contact-template .fc-contact__panel .wpforms-field textarea {
	width: 100%;
	max-width: 100%;
	margin: 0;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	line-height: 1.5;
	color: var(--ink) !important;
	background-color: transparent !important;
	border: 1px solid rgba(31, 36, 25, 0.18) !important;
	border-radius: 3px !important;
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	box-shadow: none;
}

.fc-contact-template .fc-contact__panel .wpforms-field input[type='text'],
.fc-contact-template .fc-contact__panel .wpforms-field input[type='email'],
.fc-contact-template .fc-contact__panel .wpforms-field input[type='tel'],
.fc-contact-template .fc-contact__panel .wpforms-field select {
	height: 48px;
}

.fc-contact-template .fc-contact__panel .wpforms-field textarea {
	min-height: 132px;
	resize: vertical;
}

.fc-contact-template .fc-contact__panel .wpforms-field ::placeholder {
	color: rgba(31, 36, 25, 0.52);
}

/* Native select chrome would otherwise show the OS default arrow, so one in
   the brand ink is drawn here and the control's own one suppressed. */
.fc-contact-template .fc-contact__panel .wpforms-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	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 1.5 6 6.5l5-5' fill='none' stroke='%231f2419' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	cursor: pointer;
}

/* The options list is painted by the OS, not the page, so it needs its own
   dark colours or it renders as white text on white. */
.fc-contact-template .fc-contact__panel .wpforms-field select option {
	color: var(--ink);
	background: #fff;
}

.fc-contact-template .fc-contact__panel .wpforms-field input:hover,
.fc-contact-template .fc-contact__panel .wpforms-field select:hover,
.fc-contact-template .fc-contact__panel .wpforms-field textarea:hover {
	border-color: rgba(31, 36, 25, 0.32) !important;
}

.fc-contact-template .fc-contact__panel .wpforms-field input:focus,
.fc-contact-template .fc-contact__panel .wpforms-field select:focus,
.fc-contact-template .fc-contact__panel .wpforms-field textarea:focus {
	outline: none;
	border-color: var(--green) !important;
	background-color: rgba(74, 124, 58, 0.04) !important;
	box-shadow: 0 0 0 3px rgba(74, 124, 58, 0.16);
}

/* WPForms marks a failed field with .wpforms-error on the control itself,
   where the old markup used aria-invalid. */
.fc-contact-template .fc-contact__panel .wpforms-field input.wpforms-error,
.fc-contact-template .fc-contact__panel .wpforms-field select.wpforms-error,
.fc-contact-template .fc-contact__panel .wpforms-field textarea.wpforms-error {
	border-color: #ce5c4a !important;
}

.fc-contact-template .fc-contact__panel .wpforms-field input.wpforms-error:focus,
.fc-contact-template .fc-contact__panel .wpforms-field select.wpforms-error:focus,
.fc-contact-template .fc-contact__panel .wpforms-field textarea.wpforms-error:focus {
	border-color: #ce5c4a !important;
	box-shadow: 0 0 0 3px rgba(206, 92, 74, 0.28);
}

/* Chrome paints its own near-white autofill background over the field; the
   inset shadow repaints the panel colour so a saved-address fill does not
   flash yellow, and the text is forced back to ink. */
.fc-contact-template .fc-contact__panel .wpforms-field input:-webkit-autofill,
.fc-contact-template .fc-contact__panel .wpforms-field input:-webkit-autofill:hover,
.fc-contact-template .fc-contact__panel .wpforms-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	caret-color: var(--ink);
}

/* ============ ERRORS AND DESCRIPTIONS ============ */

.fc-contact__panel .wpforms-field em.wpforms-error,
.fc-contact__panel .wpforms-error-container {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.4;
	color: #963527;
	background: none;
	border: 0;
}

/* The AppFolio hand-off note under the unit picker, which was
   .fc-contact__form-note in the old markup. */
.fc-contact__panel .wpforms-field-description {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--warm-gray);
}

/* ============ NOTICES ============ */

/* The submitted-successfully message, matching .fc-contact__notice--ok. */
.fc-contact__panel .wpforms-confirmation-container,
.fc-contact__panel .wpforms-confirmation-container-full {
	margin: 0;
	padding: 14px 18px;
	border: 0;
	border-left: 3px solid var(--green);
	border-radius: 3px;
	background: rgba(74, 124, 58, 0.1);
	color: var(--green-dark);
	font-size: 14.5px;
	line-height: 1.5;
}

.fc-contact__panel .wpforms-confirmation-container p,
.fc-contact__panel .wpforms-confirmation-container-full p {
	margin: 0;
	color: inherit;
}

/* Form-level failures (a CAPTCHA that did not verify, a send that failed),
   matching .fc-contact__notice--error. */
.fc-contact__panel .wpforms-error-container-full,
.fc-contact__panel .wpforms-form > .wpforms-error-container {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-left: 3px solid #ce5c4a;
	border-radius: 3px;
	background: rgba(206, 92, 74, 0.1);
	color: #963527;
	font-size: 14.5px;
	line-height: 1.5;
}

.fc-contact__panel .wpforms-error-container-full p,
.fc-contact__panel .wpforms-form > .wpforms-error-container p {
	margin: 0;
	color: inherit;
}

/* ============ CAPTCHA ============ */

/* Turnstile paints its own widget; all this does is give it the same rhythm
   as a field and stop it forcing the panel wider on a phone. */
.fc-contact__panel .wpforms-recaptcha-container {
	padding: 0;
	max-width: 100%;
	overflow-x: auto;
}

.fc-contact__panel .wpforms-recaptcha-container iframe {
	max-width: 100%;
}

/* Turnstile renders at its "flexible" size here (inc/wpforms-contact.php),
   which fills whatever width its container has, so match the submit button. */
.fc-contact__panel .wpforms-recaptcha-container,
.fc-contact__panel .wpforms-turnstile {
	width: 100%;
}

/* ============ SUBMIT ============ */

/* The brand .btn / .btn-primary rules live in home.css, which never loads on
   this page, so the submit carries the full button treatment itself rather
   than inheriting a class that is not there. Shape and type match the homepage
   buttons; !important is what it takes to beat the Elementor kit's own
   `.elementor-kit-99 button` padding and radius. */
.fc-contact__panel .wpforms-submit-container {
	padding: 0;
	margin: 0;
}

.fc-contact-template .fc-contact__panel button.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	margin-top: 4px;
	padding: 0 24px !important;
	font-family: var(--font-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff !important;
	background-color: var(--green) !important;
	border: 1.5px solid var(--green) !important;
	border-radius: 3px !important;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.fc-contact-template .fc-contact__panel button.wpforms-submit:hover,
.fc-contact-template .fc-contact__panel button.wpforms-submit:focus {
	background-color: var(--green-light) !important;
	border-color: var(--green-light) !important;
	transform: translateY(-2px);
}

.fc-contact-template .fc-contact__panel button.wpforms-submit:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* While the submission is in flight, and in tour mode before a unit is
   picked. */
.fc-contact-template .fc-contact__panel button.wpforms-submit:disabled,
.fc-contact-template .fc-contact__panel button.wpforms-submit.wpforms-disabled {
	background-color: rgba(31, 36, 25, 0.22) !important;
	border-color: rgba(31, 36, 25, 0.22) !important;
	cursor: not-allowed;
}

.fc-contact-template .fc-contact__panel button.wpforms-submit:disabled:hover,
.fc-contact-template .fc-contact__panel button.wpforms-submit:disabled:focus,
.fc-contact-template .fc-contact__panel button.wpforms-submit.wpforms-disabled:hover,
.fc-contact-template .fc-contact__panel button.wpforms-submit.wpforms-disabled:focus {
	background-color: rgba(31, 36, 25, 0.22) !important;
	border-color: rgba(31, 36, 25, 0.22) !important;
	transform: none;
}

.fc-contact__panel .wpforms-submit-spinner {
	margin-left: 10px;
	vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
	.fc-contact-template .fc-contact__panel button.wpforms-submit:hover,
	.fc-contact-template .fc-contact__panel button.wpforms-submit:focus {
		transform: none;
	}
}

/* ============ SCHEDULE A TOUR MODE ============ */

/* WPForms conditional logic does the showing and hiding (and, more to the
   point, the matching validation); this only carries the 200ms crossfade the
   old JS ran when the two shapes swapped, driven by assets/contact-tour.js. */
.fc-contact__panel .wpforms-field-container.is-fc-mode-exiting {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.fc-contact__panel .wpforms-field-container.is-fc-mode-entering {
	opacity: 0;
	transform: translateY(8px);
}

.fc-contact__panel .wpforms-field-container.is-fc-mode-entered {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Draws the eye to the Subject field right after the bento card fills it in,
   so "Schedule a tour" landing pre-selected doesn't read as if nothing
   happened. */
@keyframes fc-contact-subject-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(74, 124, 58, 0.45);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(74, 124, 58, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(74, 124, 58, 0);
	}
}

.fc-contact__panel .wpforms-field--pulse select {
	border-radius: 3px;
	animation: fc-contact-subject-pulse 1.1s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
	.fc-contact__panel .wpforms-field-container.is-fc-mode-exiting,
	.fc-contact__panel .wpforms-field-container.is-fc-mode-entering,
	.fc-contact__panel .wpforms-field-container.is-fc-mode-entered {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.fc-contact__panel .wpforms-field--pulse select {
		animation: none;
	}
}

/* ============ APARTMENT PICKER ============ */

/* "Which apartments?" in tour mode, a native <select multiple> that
   assets/tour-unit-picker.js dresses as a chip picker (modelled on the uiarc
   Multi-select). The native select stays in the DOM, out of sight, as the
   value WPForms submits. Buttons carry !important for the same reason the
   submit does: the Elementor kit styles every `button`. */
.fc-contact-template .fc-contact__panel .fc-ms {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fc-contact-template .fc-contact__panel .fc-ms .fc-ms__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0;
	clip-path: inset(50%);
	pointer-events: none;
}

/* WPForms drops its error message right after the select, inside the picker. */
.fc-contact__panel .fc-ms > em.wpforms-error {
	order: 3;
}

.fc-ms__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fc-ms__control {
	position: relative;
}

/* The green frame and the bento grid after it are both z-index 1 siblings
   (contact.css), so the bento, coming later, painted over any menu that ran
   out of the frame. The frame is lifted above it while the menu is open or
   fading out. */
.fc-contact__frame:has(.fc-ms.is-raised) {
	z-index: 3;
}

.fc-contact-template .fc-contact__panel .fc-ms__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 42px 0 14px !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: var(--ink) !important;
	background: transparent !important;
	border: 1px solid rgba(31, 36, 25, 0.18) !important;
	border-radius: var(--fc-radius-control) !important;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.fc-contact-template .fc-contact__panel .fc-ms__trigger:hover {
	border-color: rgba(31, 36, 25, 0.32) !important;
}

.fc-contact-template .fc-contact__panel .fc-ms__trigger:focus-visible,
.fc-contact-template .fc-contact__panel .fc-ms.is-open .fc-ms__trigger {
	outline: none;
	border-color: var(--green) !important;
	background-color: rgba(74, 124, 58, 0.04) !important;
	box-shadow: 0 0 0 3px rgba(74, 124, 58, 0.16);
}

.fc-contact-template .fc-contact__panel .fc-ms:has(.fc-ms__native.wpforms-error) .fc-ms__trigger {
	border-color: #ce5c4a !important;
}

/* Room for the clear button, which sits just left of the chevron. */
.fc-contact-template .fc-contact__panel .fc-ms.has-value .fc-ms__trigger {
	padding-right: 74px !important;
}

.fc-ms__value {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.fc-ms__placeholder {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgba(31, 36, 25, 0.52);
}

.fc-ms.has-value .fc-ms__placeholder {
	display: none;
}

.fc-ms__chips {
	display: flex;
	align-items: center;
	min-width: 0;
}

.fc-ms:not(.has-value) .fc-ms__chips {
	display: none;
}

/* Capped and ellipsized so the trigger stays on one line. The slot width
   (max-width, margin, padding) animates with the chip, so its neighbours
   slide over instead of jumping. */
.fc-ms__chip {
	display: inline-block;
	flex: none;
	max-width: 10rem;
	margin-right: 6px;
	padding: 3px 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--fc-green-dark);
	background: var(--fc-green-pale);
	border-radius: var(--fc-radius-pill);
	transition:
		max-width 0.24s cubic-bezier(0.23, 1, 0.32, 1),
		margin-right 0.24s cubic-bezier(0.23, 1, 0.32, 1),
		padding 0.24s cubic-bezier(0.23, 1, 0.32, 1),
		opacity 0.18s ease,
		transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1),
		filter 0.18s ease;
}

.fc-ms__chip.is-entering,
.fc-ms__chip.is-leaving {
	max-width: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	opacity: 0;
	transform: scale(0.9);
	filter: blur(2px);
}

.fc-ms__chip.is-leaving {
	transition-duration: 0.16s;
	transition-timing-function: ease-in;
}

/* The rolling +N: old and new numbers share one grid cell and slide past each
   other vertically, upward as the count grows. */
.fc-ms__more {
	display: none;
	flex: none;
	align-items: center;
	padding: 3px 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--warm-gray);
	background: rgba(31, 36, 25, 0.06);
	border-radius: var(--fc-radius-pill);
}

.fc-ms__more.is-shown {
	display: inline-flex;
}

.fc-ms__more-track {
	display: inline-grid;
	overflow: hidden;
}

.fc-ms__more-num {
	grid-area: 1 / 1;
	transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s ease;
}

.fc-ms__more-num.is-entering-up,
.fc-ms__more-num.is-leaving-down {
	transform: translateY(100%);
	opacity: 0;
}

.fc-ms__more-num.is-entering-down,
.fc-ms__more-num.is-leaving-up {
	transform: translateY(-100%);
	opacity: 0;
}

.fc-ms__chevron {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 12px;
	height: 8px;
	margin-top: -4px;
	fill: none;
	stroke: currentColor;
	stroke-opacity: 0.55;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.24s cubic-bezier(0.23, 1, 0.32, 1);
	pointer-events: none;
}

.fc-ms.is-open .fc-ms__chevron {
	transform: rotate(180deg);
}

.fc-contact-template .fc-contact__panel .fc-ms__clear {
	position: absolute;
	top: 50%;
	right: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	padding: 0 !important;
	color: rgba(31, 36, 25, 0.55) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--fc-radius-pill) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.fc-contact-template .fc-contact__panel .fc-ms__clear[hidden] {
	display: none;
}

.fc-contact-template .fc-contact__panel .fc-ms__clear:hover {
	color: var(--ink) !important;
	background: rgba(31, 36, 25, 0.07) !important;
}

.fc-contact-template .fc-contact__panel .fc-ms__clear:active {
	transform: scale(0.92);
}

.fc-contact-template .fc-contact__panel .fc-ms__clear:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 1px;
}

.fc-ms__clear svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* The menu springs in from just above the field and leaves faster than it
   arrives. visibility rather than display, so the leave can play out. */
.fc-ms__popover {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--fc-white);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius-card);
	box-shadow: var(--fc-shadow-raised);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top center;
	transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}

.fc-ms.is-open .fc-ms__popover {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.18s cubic-bezier(0.23, 1, 0.32, 1), transform 0.26s cubic-bezier(0.34, 1.3, 0.64, 1), visibility 0s;
}

/* Positioned so each row's offsetTop is measured from here, which is what
   tour-unit-picker.js scrolls by. */
.fc-ms__list {
	position: relative;
	max-height: min(340px, 55vh);
	/* The small viewport height, so a phone's browser toolbars can't push the
	   bottom of the menu off screen. */
	max-height: min(340px, 55svh);
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--green) var(--mist);
}

/* Same scrollbar as the homepage filter dropdowns (.cs-list) and the
   crossroads map list (.loc-list) in home.css, which does not load here. */
.fc-ms__list::-webkit-scrollbar { width: 8px; }
.fc-ms__list::-webkit-scrollbar-track { background: var(--mist); }
.fc-ms__list::-webkit-scrollbar-thumb {
	background: var(--green);
	border-radius: 4px;
}
.fc-ms__list::-webkit-scrollbar-thumb:hover { background: var(--ink); }

.fc-ms__group + .fc-ms__group {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid rgba(31, 36, 25, 0.07);
}

/* Same uppercase micro-label as the field labels, pinned while its building
   scrolls past. */
.fc-ms__group-label {
	position: sticky;
	top: -6px;
	z-index: 1;
	padding: 8px 10px 6px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(31, 36, 25, 0.6);
	background: var(--fc-white);
}

/* A short fade under the pinned label, so a row scrolling beneath it melts
   away instead of showing a clipped sliver of text. */
.fc-ms__group-label::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 10px;
	background: linear-gradient(to bottom, var(--fc-white), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.fc-ms__option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: 6px;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.12s ease;
}

.fc-ms__option.is-active {
	background: rgba(31, 36, 25, 0.05);
}

.fc-ms__option[aria-selected='true'] {
	background: rgba(74, 124, 58, 0.07);
}

.fc-ms__option[aria-selected='true'].is-active {
	background: rgba(74, 124, 58, 0.12);
}

.fc-ms__check {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid rgba(31, 36, 25, 0.3);
	border-radius: 4px;
	background: var(--fc-white);
	transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.fc-ms__option:active .fc-ms__check {
	transform: scale(0.9);
}

.fc-ms__option[aria-selected='true'] .fc-ms__check {
	background: var(--green);
	border-color: var(--green);
}

/* The checkmark draws itself in (pathLength="1" on the path). */
.fc-ms__check svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.1s ease-in;
}

.fc-ms__option[aria-selected='true'] .fc-ms__check svg {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.22s cubic-bezier(0.65, 0, 0.35, 1) 0.04s;
}

.fc-ms__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.fc-ms__unit {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}

.fc-ms__details {
	font-size: 13px;
	line-height: 1.4;
	color: var(--warm-gray);
}

.fc-ms__details:empty,
.fc-ms__rent:empty {
	display: none;
}

.fc-ms__rent {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.fc-ms__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 8px 8px 16px;
	border-top: 1px solid rgba(31, 36, 25, 0.08);
	background: rgba(31, 36, 25, 0.02);
}

.fc-ms__count {
	font-size: 13px;
	color: var(--warm-gray);
}

.fc-contact-template .fc-contact__panel .fc-ms__done {
	height: 34px;
	padding: 0 16px !important;
	font-family: var(--font-body) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff !important;
	background: var(--green) !important;
	border: 0 !important;
	border-radius: var(--fc-radius-control) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.fc-contact-template .fc-contact__panel .fc-ms__done:hover {
	background: var(--green-light) !important;
}

.fc-contact-template .fc-contact__panel .fc-ms__done:active {
	transform: scale(0.97);
}

/* Rows get a bigger hit area on touch screens. */
@media (pointer: coarse) {
	.fc-ms__option {
		padding: 12px 10px;
	}
}

/* ============ BOOKING LIST (SEVERAL APARTMENTS) ============ */

/* Replaces the redirect when more than one apartment was picked, since
   AppFolio books one per showing (fc_contact_form_multi_tour_message()).

   It is the next step of the form rather than a notice, so it drops the green
   notice box the one-line "sent" message uses and sits on the panel the way
   the fields did. Below the heading is a collapsible checklist modelled on the
   beui.dev Todo List: a header with a rolling count, and one row per
   apartment that is checked off and struck through once its AppFolio tab has
   been opened (assets/tour-unit-picker.js). */
.fc-contact__panel .wpforms-confirmation-container:has(.fc-tour-list),
.fc-contact__panel .wpforms-confirmation-container-full:has(.fc-tour-list) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ink);
}

.fc-tour-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fc-contact-template .fc-contact__panel .fc-tour-list__title {
	margin: 0;
	font-family: var(--font-display) !important;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
	text-wrap: balance;
	color: var(--ink);
}

/* Same accent as the "Touch" in the panel's own heading. */
.fc-contact-template .fc-contact__panel .fc-tour-list__title b {
	font-family: var(--font-accent);
	font-weight: 300;
	color: var(--green);
}

.fc-contact__panel .wpforms-confirmation-container .fc-tour-list__lead {
	max-width: 44ch;
	margin: -8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--warm-gray);
}

.fc-tour-list__box {
	overflow: hidden;
	border: 1px solid var(--fc-line);
	border-radius: 12px;
}

/* ---------- Header ---------- */

/* !important against the Elementor kit's `button` styling, as everywhere
   else in this file. */
.fc-contact-template .fc-contact__panel .fc-tour-list__head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 16px !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: var(--ink) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer;
}

.fc-contact-template .fc-contact__panel .fc-tour-list__head:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: -2px;
}

.fc-tour-list__head-icon {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
}

.fc-tour-list__head-icon svg {
	position: absolute;
	inset: 0;
	width: 22px;
	height: 22px;
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.fc-tour-list__icon-list {
	fill: none;
	stroke: var(--warm-gray);
	stroke-width: 1.6;
	stroke-linecap: round;
}

.fc-tour-list__icon-done {
	opacity: 0;
	transform: scale(0.6);
}

.fc-tour-list__icon-done circle {
	fill: var(--green);
}

.fc-tour-list__icon-done path {
	fill: none;
	stroke: #fff;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fc-tour-list.is-complete .fc-tour-list__icon-list {
	opacity: 0;
	transform: scale(0.6);
}

.fc-tour-list.is-complete .fc-tour-list__icon-done {
	opacity: 1;
	transform: none;
}

.fc-tour-list__heading {
	flex: 1;
	min-width: 0;
}

.fc-tour-list__count {
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--warm-gray);
	transition: color 0.2s ease;
}

.fc-tour-list.is-complete .fc-tour-list__count {
	color: var(--green);
}

/* The rolling digit: old and new share one grid cell and pass each other
   vertically. */
.fc-tour-list__roll {
	display: inline-grid;
	height: 1.5em;
	overflow: hidden;
}

.fc-tour-list__roll span {
	grid-area: 1 / 1;
	transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s ease;
}

.fc-tour-list__roll .is-out {
	transform: translateY(-100%);
	opacity: 0;
}

.fc-tour-list__roll .is-in {
	transform: translateY(100%);
	opacity: 0;
}

.fc-tour-list__chevron {
	flex: none;
	width: 12px;
	height: 8px;
	fill: none;
	stroke: var(--warm-gray);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.fc-tour-list__head[aria-expanded='false'] .fc-tour-list__chevron {
	transform: rotate(-90deg);
}

/* ---------- Body ---------- */

/* Collapses by animating the grid row from 1fr to 0fr. */
.fc-tour-list__body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.fc-tour-list__head[aria-expanded='false'] + .fc-tour-list__body {
	grid-template-rows: 0fr;
}

.fc-tour-list__body > div {
	overflow: hidden;
}

.fc-tour-list__items {
	margin: 0;
	padding: 4px 8px 8px;
	list-style: none;
	border-top: 1px solid var(--fc-line);
}

.fc-tour-list__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 11px 8px;
}

.fc-tour-list__item + .fc-tour-list__item {
	border-top: 1px dashed rgba(31, 36, 25, 0.12);
}

.fc-tour-list__status {
	flex: none;
	width: 20px;
	height: 20px;
}

.fc-tour-list__ring {
	fill: none;
	stroke: rgba(31, 36, 25, 0.35);
	stroke-width: 1.5;
	stroke-dasharray: 2 3;
	transition: opacity 0.2s ease;
}

.fc-tour-list__fill {
	fill: var(--green);
	opacity: 0;
	transform: scale(0.5);
	transform-origin: center;
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Drawn in once the row is opened (pathLength="1" on the path). */
.fc-tour-list__tick {
	fill: none;
	stroke: #fff;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.24s ease 0.08s;
}

.fc-tour-list__item.is-booked .fc-tour-list__ring {
	opacity: 0;
}

.fc-tour-list__item.is-booked .fc-tour-list__fill {
	opacity: 1;
	transform: none;
}

.fc-tour-list__item.is-booked .fc-tour-list__tick {
	stroke-dashoffset: 0;
}

.fc-tour-list__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

/* A real line-through, faded in rather than drawn, because a drawn line
   can only cross one line of text and a name wraps on a phone. */
.fc-tour-list__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	text-decoration-line: line-through;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease, text-decoration-color 0.25s ease 0.06s;
}

.fc-tour-list__item.is-booked .fc-tour-list__name {
	color: rgba(31, 36, 25, 0.5);
	text-decoration-color: currentColor;
}

.fc-tour-list__meta {
	font-size: 13px;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
	color: var(--warm-gray);
}

.fc-contact__panel a.fc-tour-list__book {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	color: var(--fc-green-dark);
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.fc-contact__panel a.fc-tour-list__book:hover {
	color: var(--fc-green-dark);
	background: var(--fc-green-pale);
}

.fc-contact__panel a.fc-tour-list__book:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 1px;
}

.fc-tour-list__icon {
	width: 11px;
	height: 11px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fc-tour-list__again-label {
	display: none;
}

/* Still usable after opening, in case AppFolio was closed before booking. */
.fc-contact__panel .fc-tour-list__item.is-booked a.fc-tour-list__book {
	font-weight: 500;
	color: var(--warm-gray);
}

.fc-contact__panel .fc-tour-list__item.is-booked a.fc-tour-list__book:hover {
	color: var(--ink);
	background: rgba(31, 36, 25, 0.05);
}

.fc-tour-list__item.is-booked .fc-tour-list__book-label {
	display: none;
}

.fc-tour-list__item.is-booked .fc-tour-list__again-label {
	display: inline;
}

.fc-tour-list__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.fc-contact-template .fc-contact__panel .fc-tour-list__title {
		font-size: 26px;
	}

	.fc-tour-list__items {
		padding: 2px 4px 6px;
	}

	/* The link drops under the apartment, lined up with its text (its own
	   10px padding pulled back), so a long name keeps the full width. */
	.fc-tour-list__item {
		display: grid;
		grid-template-columns: 20px minmax(0, 1fr);
		align-items: start;
		column-gap: 10px;
		row-gap: 2px;
		padding: 11px 6px;
	}

	.fc-tour-list__status {
		margin-top: 1px;
	}

	.fc-contact__panel a.fc-tour-list__book {
		grid-column: 2;
		justify-self: start;
		margin-left: -10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fc-tour-list__head-icon svg,
	.fc-tour-list__roll span,
	.fc-tour-list__chevron,
	.fc-tour-list__body,
	.fc-tour-list__ring,
	.fc-tour-list__fill,
	.fc-tour-list__name {
		transition: none;
	}

	.fc-tour-list__fill,
	.fc-tour-list__head-icon svg {
		transform: none;
	}

	.fc-tour-list__tick {
		stroke-dashoffset: 0;
		opacity: 0;
		transition: opacity 0.12s ease;
	}

	.fc-tour-list__item.is-booked .fc-tour-list__tick {
		opacity: 1;
	}
}

/* Each change becomes a short crossfade: no scale, slide, blur or draw. */
@media (prefers-reduced-motion: reduce) {
	.fc-ms__chip,
	.fc-ms__more-num,
	.fc-ms__check,
	.fc-ms__check svg,
	.fc-ms__popover,
	.fc-ms.is-open .fc-ms__popover {
		transition-property: opacity, visibility;
		transition-duration: 0.12s;
		transform: none;
		filter: none;
	}

	.fc-ms__check svg {
		stroke-dashoffset: 0;
		opacity: 0;
	}

	.fc-ms__option[aria-selected='true'] .fc-ms__check svg {
		opacity: 1;
	}
}

/* ============ RESPONSIVE ============ */

/* Two-up name and email/phone pairs are too narrow to type into on a phone. */
@media (max-width: 600px) {
	.fc-contact__panel .wpforms-field-container {
		grid-template-columns: 1fr;
	}

	.fc-contact__panel .wpforms-field.fc-half {
		grid-column: 1 / -1;
	}
}