/**
 * Front-end styles for Flexmls Spark IDX.
 *
 * Scoped under .flexmls-spark so the plugin never restyles the theme, and
 * built on custom properties so a theme or Elementor kit can retheme it by
 * redefining a handful of values.
 */

.flexmls-spark {
	--spark-gap: 1.5rem;
	--spark-radius: 10px;
	--spark-border: #e2e5ea;
	--spark-muted: #5b6472;
	--spark-text: #16202e;
	--spark-accent: #1c6fd4;

	/*
	 * Accent used for TEXT on a light background.
	 *
	 * The brand green is fine as a button fill behind white text, but as
	 * 13px bold link text on white it measures 3.09:1 — WCAG AA wants 4.5:1
	 * at that size. This darker shade measures 5.3:1 and reads as the same
	 * colour. Backgrounds and borders keep --spark-accent.
	 */
	--spark-accent-text: #0e7a5c;

	/*
	 * Link hover.
	 *
	 * Hovering used to swap the link to --spark-text, a near-black, which
	 * reads as the link switching off rather than responding. This is the
	 * same hue pushed darker: 8.2:1 on white, unmistakably a hover, still
	 * obviously the brand.
	 */
	--spark-accent-hover: #0a5b44;
	--spark-surface: #fff;
	--spark-surface-alt: #f5f7fa;

	color: var(--spark-text);
}

.flexmls-spark__container {
	margin: 0 auto;
	max-width: 1200px;
	padding: 2rem 1rem 3rem;
}

.flexmls-spark__page-title {
	margin: 0 0 1.5rem;
}

/* ---------- Search form ----------
 *
 * Control sizing is declared on compound selectors because themes and
 * Elementor kits style bare `input` and `select` with enough specificity to
 * beat a single class. Left unaddressed the row rendered at three different
 * heights — 42px inputs, 40.6px selects, 45.2px buttons — which reads as a
 * ragged, unfinished form.
 */

.flexmls-spark__form {
	--spark-control-height: 46px;

	background: var(--spark-surface-alt);
	border: 1px solid var(--spark-border);
	border-radius: var(--spark-radius);
	margin-bottom: 2rem;
	padding: 1.5rem;
}

.flexmls-spark__form-grid {
	display: grid;
	gap: 1.15rem 1rem;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.flexmls-spark__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.flexmls-spark__label {
	color: var(--spark-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	margin: 0 0 0.45rem;
	text-transform: uppercase;
}

.flexmls-spark .flexmls-spark__form .flexmls-spark__input {
	appearance: none;
	background-color: var(--spark-surface);
	border: 1px solid var(--spark-border);
	border-radius: 7px;
	box-shadow: none;
	color: var(--spark-text);
	font: inherit;
	font-size: 0.95rem;
	height: var(--spark-control-height);
	line-height: 1.3;
	margin: 0;
	min-height: var(--spark-control-height);
	padding: 0 0.85rem;
	width: 100%;
}

.flexmls-spark .flexmls-spark__form select.flexmls-spark__input {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238a93a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-position: right 0.7rem center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	cursor: pointer;
	padding-right: 2.3rem;
}

.flexmls-spark .flexmls-spark__form .flexmls-spark__input::placeholder {
	color: #9aa3b0;
	opacity: 1;
}

.flexmls-spark .flexmls-spark__form .flexmls-spark__input:hover {
	border-color: #cdd3db;
}

.flexmls-spark .flexmls-spark__form .flexmls-spark__input:focus,
.flexmls-spark .flexmls-spark__form .flexmls-spark__input:focus-visible {
	border-color: var(--spark-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--spark-accent) 18%, transparent);
	outline: none;
}

.flexmls-spark__form-actions {
	align-items: center;
	border-top: 1px solid var(--spark-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.4rem;
	padding-top: 1.3rem;
}

.flexmls-spark__field--sort {
	flex-direction: row;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
	min-width: 210px;
}

.flexmls-spark__field--sort .flexmls-spark__label { margin: 0; }

.flexmls-spark .flexmls-spark__button {
	align-items: center;
	background: var(--spark-accent);
	border: 1px solid var(--spark-accent);
	border-radius: 7px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	height: var(--spark-control-height);
	justify-content: center;
	line-height: 1;
	padding: 0 1.6rem;
	text-decoration: none;
	transition: filter 0.15s ease, background-color 0.15s ease;
	white-space: nowrap;
}

.flexmls-spark .flexmls-spark__button:hover,
.flexmls-spark .flexmls-spark__button:focus-visible {
	color: #fff;
	filter: brightness(0.93);
}

.flexmls-spark .flexmls-spark__button--ghost {
	background: transparent;
	border-color: var(--spark-border);
	color: var(--spark-text);
}

.flexmls-spark .flexmls-spark__button--ghost:hover,
.flexmls-spark .flexmls-spark__button--ghost:focus-visible {
	background: var(--spark-surface);
	border-color: var(--spark-accent);
	color: var(--spark-text);
	filter: none;
}

@media (max-width: 600px) {
	.flexmls-spark__form { padding: 1.15rem; }

	.flexmls-spark__form-grid { grid-template-columns: 1fr 1fr; }

	/* The location field reads badly at half width. */
	.flexmls-spark__field:first-child { grid-column: 1 / -1; }

	.flexmls-spark__form-actions > .flexmls-spark__button { flex: 1 1 auto; }

	.flexmls-spark__field--sort {
		flex: 1 1 100%;
		margin-left: 0;
	}
}

/* ---------- Results ---------- */

.flexmls-spark__count {
	color: var(--spark-muted);
	font-size: 0.9375rem;
	margin: 0 0 1rem;
}

.flexmls-spark__count-note {
	color: var(--spark-muted);
	font-size: 0.875rem;
	margin: 0.25rem 0 0;
}

.flexmls-spark__state {
	background: var(--spark-surface-alt);
	border: 1px solid var(--spark-border);
	border-radius: var(--spark-radius);
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.flexmls-spark__state-title { margin: 0 0 0.5rem; }
.flexmls-spark__state-text { margin: 0 0 0.5rem; }

.flexmls-spark__state-hint {
	color: var(--spark-muted);
	font-size: 0.9375rem;
	margin: 0;
}

/* ---------- Photo placeholder ---------- */

.flexmls-spark-placeholder {
	align-items: center;
	background: linear-gradient(135deg, #eef1f6 0%, #e3e8f0 100%);
	color: #9aa4b4;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	justify-content: center;
	min-height: 180px;
	width: 100%;
}

.flexmls-spark-placeholder__icon { height: 46px; width: 46px; }

.flexmls-spark-placeholder__text {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* ---------- Pagination ---------- */

.flexmls-spark__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin: 2.5rem 0 1rem;
}

.flexmls-spark__page-link {
	border: 1px solid var(--spark-border);
	border-radius: 6px;
	color: inherit;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	text-align: center;
	text-decoration: none;
}

.flexmls-spark__page-link:hover { border-color: var(--spark-accent); }

.flexmls-spark__page-link--current {
	background: var(--spark-accent);
	border-color: var(--spark-accent);
	color: #fff;
	font-weight: 600;
}

.flexmls-spark__page-gap { padding: 0.5rem 0.25rem; }

/* ---------- Compliance ---------- */

.flexmls-spark__compliance {
	border-top: 1px solid var(--spark-border);
	color: var(--spark-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
}

.flexmls-spark__compliance-logo {
	display: block;
	height: auto;
	margin-bottom: 0.75rem;
	max-width: 160px;
}

.flexmls-spark__compliance-text,
.flexmls-spark__compliance-updated,
.flexmls-spark__compliance-logo-text { margin: 0 0 0.5rem; }

.flexmls-spark__compliance-fields {
	display: grid;
	gap: 0.25rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	margin: 0 0 0.75rem;
}

.flexmls-spark__compliance-field { display: flex; gap: 0.4rem; }
.flexmls-spark__compliance-field dt { font-weight: 600; }
.flexmls-spark__compliance-field dt::after { content: ":"; }
.flexmls-spark__compliance-field dd { margin: 0; }

/* Single property styles live in property.css, loaded only on /property/ pages. */

/* ==========================================================================
   Link colours
   ==========================================================================
   Themes commonly set a link colour that has nothing to do with the brand —
   Hello Elementor's default resolves to #cc3366 here, which showed up on the
   listing agent's email. Links inside listing UI are pinned to the accent so
   they stay on-brand whatever the theme does, while links whose whole card is
   already the click target keep the body colour.
   ========================================================================== */

.flexmls-spark a:not([class]),
.flexmls-spark .flexmls-spark-agent__contact a,
.flexmls-spark .flexmls-spark-openhouses__stream a,
.flexmls-spark .flexmls-spark__compliance a {
	color: var(--spark-accent-text);
	text-decoration-color: color-mix(in srgb, var(--spark-accent) 45%, transparent);
	text-underline-offset: 0.18em;
}

.flexmls-spark a:not([class]):hover,
.flexmls-spark .flexmls-spark-agent__contact a:hover,
.flexmls-spark .flexmls-spark-openhouses__stream a:hover,
.flexmls-spark .flexmls-spark__compliance a:hover {
	color: var(--spark-accent-hover);
	text-decoration-color: currentColor;
}

/* Whole-card links must not look like inline links. */
.flexmls-spark .spark-listing-card__media-link,
.flexmls-spark .spark-listing-card__link {
	color: inherit;
	text-decoration: none;
}

.flexmls-spark a:focus-visible {
	border-radius: 3px;
	outline: 2px solid var(--spark-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   Enquiry form
   ========================================================================== */

.spark-lead {
	background: var(--spark-surface-alt);
	border: 1px solid var(--spark-border);
	border-radius: var(--spark-radius);
	margin-top: 1.25rem;
	padding: 1.4rem;
}

.spark-lead__title {
	font-size: 1.05rem;
	margin: 0 0 0.35rem;
}

.spark-lead__intro {
	color: var(--spark-muted);
	font-size: 0.9rem;
	margin: 0 0 1.1rem;
}

/*
 * The form is one grid, so every gap comes from a single `gap` value.
 * Spacing was previously a stack of margins on individual fields, and the one
 * between the last grid row and the Message box worked out to exactly zero —
 * the fields sat flush against each other.
 */
.spark-lead__form {
	display: grid;
	gap: 1.1rem;
}

.spark-lead__grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 520px) {
	.spark-lead__grid { grid-template-columns: 1fr 1fr; }
}

/*
 * The property sidebar is a narrow column whatever the viewport. Two columns
 * there measured 157px each, which is not enough for a label and a control,
 * so it stays single-column at every width.
 */
.flexmls-spark-property__sidebar .spark-lead__grid {
	grid-template-columns: 1fr;
}

.spark-lead__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.spark-lead__label {
	color: var(--spark-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
	text-transform: uppercase;
}

.spark-lead__required { color: #b32d2e; }

/* Sized on compound selectors for the same reason as the search form: themes
   style bare inputs specifically enough to override a single class. */
.flexmls-spark .spark-lead .spark-lead__input {
	appearance: none;
	background: var(--spark-surface);
	border: 1px solid var(--spark-border);
	border-radius: 7px;
	color: var(--spark-text);
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0;
	min-height: 46px;
	padding: 0.6rem 0.85rem;
	width: 100%;
}

.flexmls-spark .spark-lead .spark-lead__textarea {
	min-height: 104px;
	resize: vertical;
}

.flexmls-spark .spark-lead .spark-lead__input:focus,
.flexmls-spark .spark-lead .spark-lead__input:focus-visible {
	border-color: var(--spark-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--spark-accent) 18%, transparent);
	outline: none;
}

.spark-lead__consent {
	align-items: flex-start;
	display: flex;
	gap: 0.6rem;
	margin: 0;
}

.spark-lead__consent label {
	color: var(--spark-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.spark-lead__consent input { margin-top: 0.2rem; }

.flexmls-spark .spark-lead__submit {
	background: var(--spark-accent);
	border: 1px solid var(--spark-accent);
	border-radius: 7px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	min-height: 46px;
	padding: 0 1.5rem;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 100%;
}

/* Hello Elementor's reset fills every hovered or focused submit button with
   magenta at the same specificity as the rule above, and loads later, so the
   hover and focus colours are stated here explicitly. */
.flexmls-spark .spark-lead__submit:hover:not(:disabled),
.flexmls-spark .spark-lead__submit:focus:not(:disabled) {
	background: var(--spark-accent-hover, #0f4d4a);
	border-color: var(--spark-accent-hover, #0f4d4a);
	color: #fff;
}
.flexmls-spark .spark-lead__submit:disabled { cursor: progress; opacity: 0.7; }

.spark-lead__privacy {
	color: var(--spark-muted);
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 0.8rem 0 0;
}

/* Underlined so the link is not told apart from the note by colour alone;
   the theme drops underlines from links. */
.flexmls-spark .spark-lead__privacy a {
	text-decoration: underline;
}

.spark-lead__notice {
	border-radius: 7px;
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
}

.spark-lead__notice--success { background: #e7f6ee; color: #0a6b39; }
.spark-lead__notice--error { background: #fdeceb; color: #99251f; }

/* Visually removed but still submitted, so a bot that fills every field is
   caught while assistive technology skips it. */
.spark-lead__trap {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

/* ==========================================================================
   Share
   ========================================================================== */

.spark-share {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 0.85rem;
	margin: 1.25rem 0 0;
	min-height: 40px;
}

.spark-share__label {
	color: var(--spark-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.spark-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spark-share__list li { list-style: none; margin: 0; }

/*
 * Resting state.
 *
 * The previous buttons were a muted grey glyph inside a near-white hairline
 * circle, which read as disabled. A tinted surface with the icon at body
 * weight gives each one enough presence to look clickable without competing
 * with the enquiry CTA below it.
 */
.flexmls-spark .spark-share__button {
	align-items: center;
	background: var(--spark-surface-alt);
	border: 1px solid var(--spark-border);
	border-radius: 50%;
	box-shadow: none;
	color: var(--spark-text);
	cursor: pointer;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
	width: 40px;
}

.flexmls-spark .spark-share__button svg { display: block; }

/*
 * Hover fills with the destination's own colour and flips the glyph to white.
 * Each shade is the brand's dark variant, so an 18px white glyph clears 3:1
 * against it — the light official greens and blues do not.
 */
.flexmls-spark .spark-share__button:hover,
.flexmls-spark .spark-share__button:focus-visible {
	background: var(--spark-share-fill, var(--spark-accent-hover));
	border-color: var(--spark-share-fill, var(--spark-accent-hover));
	color: #fff;
	transform: translateY(-1px);
}

.flexmls-spark .spark-share__button--email { --spark-share-fill: var(--spark-accent-hover); }
.flexmls-spark .spark-share__button--whatsapp { --spark-share-fill: #128c7e; }
.flexmls-spark .spark-share__button--facebook { --spark-share-fill: #1877f2; }
.flexmls-spark .spark-share__button--x { --spark-share-fill: #000; }
.flexmls-spark .spark-share__button--copy,
.flexmls-spark .spark-share__button--native { --spark-share-fill: var(--spark-text); }

.flexmls-spark .spark-share__button:active { transform: translateY(0); }

/* The copy confirmation is a chip, so it reads as a result rather than stray text. */
.spark-share__feedback {
	color: var(--spark-accent-text);
	font-size: 0.78rem;
	font-weight: 600;
}

.spark-share__feedback:not(:empty) {
	background: color-mix(in srgb, var(--spark-accent) 12%, transparent);
	border-radius: 999px;
	padding: 0.25rem 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
	.flexmls-spark .spark-share__button,
	.flexmls-spark .spark-lead__submit { transition: none; }

	.flexmls-spark .spark-share__button:hover,
	.flexmls-spark .spark-share__button:focus-visible { transform: none; }
}

/* ==========================================================================
   Mortgage estimator
   ========================================================================== */

.spark-mortgage {
	background: var(--spark-surface);
	border: 1px solid var(--spark-border);
	border-radius: var(--spark-radius);
	margin-top: 1.25rem;
	padding: 1.4rem;
}

.spark-mortgage__title {
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	margin: 0 0 0.6rem;
	text-transform: uppercase;
}

.spark-mortgage__total {
	align-items: baseline;
	display: flex;
	gap: 0.35rem;
	margin: 0 0 1.2rem;
}

.spark-mortgage__amount {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.spark-mortgage__per { color: var(--spark-muted); font-size: 0.9rem; }

.spark-mortgage__grid {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.spark-mortgage__grid { grid-template-columns: 1fr 1fr; }
}

/* In the property sidebar the column is narrow whatever the viewport. */
.flexmls-spark-property__sidebar .spark-mortgage__grid { grid-template-columns: 1fr; }

.spark-mortgage__field { display: flex; flex-direction: column; min-width: 0; }

.spark-mortgage__label {
	color: var(--spark-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
	text-transform: uppercase;
}

.flexmls-spark .spark-mortgage .spark-mortgage__input {
	appearance: none;
	background: var(--spark-surface);
	border: 1px solid var(--spark-border);
	border-radius: 7px;
	color: var(--spark-text);
	font: inherit;
	font-size: 0.95rem;
	margin: 0;
	min-height: 44px;
	padding: 0 0.8rem;
	width: 100%;
}

.flexmls-spark .spark-mortgage .spark-mortgage__input:focus,
.flexmls-spark .spark-mortgage .spark-mortgage__input:focus-visible {
	border-color: var(--spark-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--spark-accent) 18%, transparent);
	outline: none;
}

.spark-mortgage__combo { display: flex; gap: 0.4rem; }

.spark-mortgage__toggle {
	display: flex;
	flex: 0 0 auto;
	border: 1px solid var(--spark-border);
	border-radius: 7px;
	overflow: hidden;
}

.flexmls-spark .spark-mortgage__unit {
	background: var(--spark-surface-alt);
	border: 0;
	color: var(--spark-muted);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	min-height: 44px;
	padding: 0 0.75rem;
}

.flexmls-spark .spark-mortgage__unit.is-active {
	background: var(--spark-accent);
	color: #fff;
}

.spark-mortgage__hint {
	color: var(--spark-muted);
	font-size: 0.78rem;
	margin: 0.4rem 0 0;
}

.spark-mortgage__more { margin-top: 1rem; }

.spark-mortgage__summary {
	color: var(--spark-accent-text);
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.8rem;
}

.spark-mortgage__breakdown {
	border-top: 1px solid var(--spark-border);
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0.9rem 0 0;
}

.spark-mortgage__breakdown li {
	display: flex;
	font-size: 0.875rem;
	justify-content: space-between;
	list-style: none;
	margin: 0 0 0.45rem;
}

/*
 * `display: flex` on the row beats the user agent's own [hidden] rule, so the
 * rows for costs the visitor has not entered rendered as "$0" instead of
 * staying out of the way. Restored explicitly.
 */
.spark-mortgage__breakdown li[hidden] {
	display: none;
}

.spark-mortgage__breakdown li span { color: var(--spark-muted); }

.spark-mortgage__disclaimer {
	color: var(--spark-muted);
	font-size: 0.72rem;
	line-height: 1.55;
	margin: 0.9rem 0 0;
}

/*
 * A general guard: any element the plugin hides with the [hidden] attribute
 * must stay hidden even where a class sets `display`.
 */
.flexmls-spark [hidden] {
	display: none !important;
}