/**
 * Front-end styles.
 *
 * Written to sit inside somebody else's theme without fighting it: no resets,
 * no opinions about typography, and every colour comes from a custom property
 * so a theme can restyle the whole plugin by redefining six values.
 */

/*
 * THE ONE RESET, AND IT IS NOT OPTIONAL.
 *
 * "No resets" was right about typography and wrong about this. Most themes
 * set `box-sizing: border-box` globally and the plugin quietly inherited it;
 * neither of ours does, and on both - our own agency theme AND the plain
 * child of Twenty Twenty-Five - the search form came out 762px wide inside a
 * 720px column, because 40px of padding and 2px of border were added on top
 * of `width: 100%`. The page scrolled sideways by eighteen pixels on every
 * screen from 768 up, and every select inside the form was overflowing its
 * column for the same reason.
 *
 * A plugin cannot assume the theme has done this, and it cannot set it
 * globally either - that would change the theme's own elements. So it is
 * scoped to our markup and everything inside it.
 */
[class^="terrasuite-"],
[class*=" terrasuite-"],
[class^="terrasuite-"] *,
[class*=" terrasuite-"] * {
	box-sizing: border-box;
}

/*
 * THE PALETTE GOES ON EVERYTHING OF OURS, NOT ON A LIST OF TWELVE.
 *
 * It used to be the twelve container classes below, and a shortcode whose
 * root was not one of them rendered with every custom property undefined.
 * That is not a missing colour - `border: 1px solid var(--terrasuite-edge)`
 * with nothing to resolve is an INVALID declaration, so the border is not
 * drawn at all. Every text, email and telephone box inside those blocks was
 * a label with nothing under it, on a white page, while the date field and
 * the select still showed their native frames. Found on 24 October 2026 on
 * oliaproperty.com the hour the services block went on a page.
 *
 * It was fourteen of the twenty-eight shortcodes: services, viewing trips,
 * the team, offices, reviews, the calculator, compare, the newsletter, both
 * browse tiles, the language switcher, the agency contact card and the
 * property map. Half the plugin, on any page where the block is the whole
 * page, since 1.0.
 *
 * The same attribute selectors as the box-sizing reset above, for the same
 * reason: a list is a promise that somebody will remember the next root
 * class, and the thirteenth was already missing. Custom properties inherit
 * and resolve to the same values either way, so defining them on nested
 * elements as well costs nothing.
 */
[class^="terrasuite-"],
[class*=" terrasuite-"] {
	--terrasuite-accent: #1f4e79;
	--terrasuite-accent-contrast: #ffffff;
	--terrasuite-ink: #1d2327;
	--terrasuite-muted: #62707c;
	--terrasuite-line: #e2e6ea;

	/*
	 * THE EDGE OF SOMETHING YOU TYPE IN IS NOT A HAIRLINE.
	 *
	 * --terrasuite-line is right for a rule between two sections: it should
	 * barely be there. It was also being used for the border of every input,
	 * select, textarea and button, and WCAG 1.4.11 asks 3:1 of anything that
	 * carries meaning without words - which the boundary of a field does. On
	 * our own theme it measured #dfd9d0 on white, 1.40:1, on every control on
	 * every page: the commonest accessibility complaint there is, and it was
	 * in every installation of this plugin.
	 *
	 * #8f8578 is 3.6:1 on white and stays in the warm family the palette
	 * uses. A theme that maps --terrasuite-line should map this too; if it
	 * does not, this default is still correct rather than still invisible.
	 */
	--terrasuite-edge: #8f8578;
	--terrasuite-surface: #ffffff;
	--terrasuite-surface-2: #f6f8fa;
	--terrasuite-radius: 10px;
	--terrasuite-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
}

/*
 * The ink itself is still set on the containers alone. It is an ordinary
 * property rather than a custom one, so putting it on every descendant would
 * overrule a theme styling something inside our markup.
 */
.terrasuite,
.terrasuite-results,
.terrasuite-search,
.terrasuite-property,
.terrasuite-account,
.terrasuite-form,
.terrasuite-kb,
.terrasuite-areas,
.terrasuite-mapsearch,
.terrasuite-assistant,
.terrasuite-shortlist,
.terrasuite-bookings,
.terrasuite-services,
.terrasuite-trip,
.terrasuite-team,
.terrasuite-offices,
.terrasuite-reviews,
.terrasuite-calc,
.terrasuite-compare,
.terrasuite-newsletter,
.terrasuite-browse,
.terrasuite-langs,
.terrasuite-agency,
.terrasuite-propertymap {
	color: var(--terrasuite-ink);
}

@media (prefers-color-scheme: dark) {
	[class^="terrasuite-"],
	[class*=" terrasuite-"] {
		--terrasuite-ink: #e8eaed;
		--terrasuite-muted: #9aa4ae;
		--terrasuite-line: #33383d;
		--terrasuite-edge: #8a9096;
		--terrasuite-surface: #1e2226;
		--terrasuite-surface-2: #24282d;
		--terrasuite-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	}
}

/* Buttons ----------------------------------------------------------------- */

.terrasuite-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .7em 1.3em;
	border: 1px solid var(--terrasuite-accent);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-accent);
	color: var(--terrasuite-accent-contrast);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
}

.terrasuite-button:hover,
.terrasuite-button:focus {
	filter: brightness(1.1);
	color: var(--terrasuite-accent-contrast);
}

.terrasuite-button:active {
	transform: translateY(1px);
}

.terrasuite-button[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.terrasuite-button--quiet {
	background: transparent;
	color: var(--terrasuite-accent);
}

.terrasuite-button--small {
	padding: .45em .9em;
	font-size: .9em;
}

.terrasuite-button--whatsapp {
	background: #25d366;
	border-color: #25d366;
	color: #05320f;
}

.terrasuite-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--terrasuite-accent);
	text-decoration: underline;
	cursor: pointer;
}

/* Notices ----------------------------------------------------------------- */

.terrasuite-notice {
	margin: 0 0 1.5rem;
	padding: .9rem 1.1rem;
	border-radius: var(--terrasuite-radius);
	border-left: 4px solid var(--terrasuite-accent);
	background: var(--terrasuite-surface-2);
}

.terrasuite-notice--error {
	border-left-color: #b32d2e;
}

.terrasuite-hint,
.terrasuite-form__privacy,
.terrasuite-form__note {
	display: block;
	margin-top: .35rem;
	color: var(--terrasuite-muted);
	font-size: .875em;
	line-height: 1.5;
}

/* Search form ------------------------------------------------------------- */

.terrasuite-search {
	margin: 0 0 2rem;
	padding: 1.25rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
	box-shadow: var(--terrasuite-shadow);
}

.terrasuite-search__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	align-items: end;
}

.terrasuite-search--vertical .terrasuite-search__row {
	grid-template-columns: 1fr;
}

.terrasuite-field label {
	display: block;
	margin-bottom: .35rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--terrasuite-muted);
}

.terrasuite-field input[type="text"],
.terrasuite-field input[type="search"],
.terrasuite-field input[type="number"],
.terrasuite-field input[type="email"],
.terrasuite-field input[type="tel"],
.terrasuite-field input[type="url"],
.terrasuite-field input[type="date"],
.terrasuite-field input[type="datetime-local"],
.terrasuite-field select,
.terrasuite-field textarea {
	width: 100%;
	padding: .65em .8em;
	border: 1px solid var(--terrasuite-edge);
	border-radius: 8px;
	background: var(--terrasuite-surface);
	color: var(--terrasuite-ink);
	font: inherit;
	line-height: 1.35;
}

.terrasuite-field input:focus,
.terrasuite-field select:focus,
.terrasuite-field textarea:focus {
	outline: 2px solid var(--terrasuite-accent);
	outline-offset: 1px;
	border-color: var(--terrasuite-accent);
}

.terrasuite-field__pair {
	display: flex;
	gap: .5rem;
}

/* Without this the inputs refuse to shrink and the placeholder is clipped. */
.terrasuite-field__pair > * {
	flex: 1 1 0;
	min-width: 0;
}

.terrasuite-field--checks {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	align-content: end;
}

.terrasuite-field--checks label,
.terrasuite-field--consent label {
	display: flex;
	align-items: center;
	gap: .45em;
	margin: 0;
	font-size: .95rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--terrasuite-ink);
}

.terrasuite-search__more {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--terrasuite-line);
}

.terrasuite-search__more summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--terrasuite-accent);
}

.terrasuite-search__features {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
}

.terrasuite-search__features legend {
	padding: 0;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--terrasuite-muted);
}

.terrasuite-search__features label {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: .35rem .9rem 0 0;
	font-size: .95rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--terrasuite-ink);
}

.terrasuite-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

.terrasuite-results__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.terrasuite-results__count {
	margin: 0;
	font-weight: 600;
}

.terrasuite-results__sort {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.terrasuite-results__sort label {
	margin: 0;
	font-size: .85rem;
	color: var(--terrasuite-muted);
}

.terrasuite-results__sort select {
	padding: .45em .7em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 8px;
	background: var(--terrasuite-surface);
	color: var(--terrasuite-ink);
	font: inherit;
}

.terrasuite-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.terrasuite-grid--list {
	grid-template-columns: 1fr;
}

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

.terrasuite-card:hover {
	box-shadow: 0 4px 8px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .1);
	transform: translateY(-2px);
}

.terrasuite-card--list {
	flex-direction: row;
}

.terrasuite-card--list .terrasuite-card__media {
	flex: 0 0 34%;
	max-width: 340px;
}

.terrasuite-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--terrasuite-surface-2);
	overflow: hidden;
}

.terrasuite-card--list .terrasuite-card__media {
	aspect-ratio: auto;
}

.terrasuite-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.terrasuite-card__media a {
	display: block;
	height: 100%;
	text-decoration: none;
}

.terrasuite-card__noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--terrasuite-muted);
	font-size: .9rem;
	text-decoration: none;
}

.terrasuite-card__status,
.terrasuite-card__flag {
	position: absolute;
	top: .75rem;
	left: .75rem;
	padding: .3em .7em;
	border-radius: 999px;
	background: var(--terrasuite-ink);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.terrasuite-card__flag {
	background: var(--terrasuite-accent);
}

.terrasuite-fav {
	position: absolute;
	top: .6rem;
	right: .6rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.terrasuite-fav svg {
	width: 1.3rem;
	height: 1.3rem;
	fill: none;
	stroke: #55606a;
	stroke-width: 1.6;
}

.terrasuite-fav.is-saved svg {
	fill: #d0342c;
	stroke: #d0342c;
}

/*
 * The one on the property page.
 *
 * It was a pale grey pill with a thin grey outline heart in it, sitting under
 * the price, and it read as nothing at all - "there is a heart on the cards and
 * not on the property". The heart was there; it was just invisible. On the page
 * where somebody has decided they like the house, saving it is the second most
 * important thing they can do after enquiring, so it is now drawn as a button.
 */
.terrasuite-fav--large {
	position: static;
	width: auto;
	height: auto;
	padding: .6em 1.1em;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
	color: var(--terrasuite-ink);
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font: inherit;
	font-weight: 600;
	box-shadow: none;
}

.terrasuite-fav--large svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke: var(--terrasuite-accent);
	stroke-width: 1.8;
}

.terrasuite-fav--large:hover {
	border-color: var(--terrasuite-accent);
}

/*
 * Once it is saved the heart fills and the button says so. A control whose
 * only feedback is a colour change nobody notices is a control people press
 * twice.
 */
.terrasuite-fav--large.is-saved {
	border-color: #d0342c;
	color: #d0342c;
}

.terrasuite-fav--large.is-saved svg {
	fill: #d0342c;
	stroke: #d0342c;
}

.terrasuite-card__body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1rem 1.1rem 1.2rem;
}

.terrasuite-card__price {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--terrasuite-accent);
}

.terrasuite-card__title {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.35;
}

.terrasuite-card__title a {
	color: inherit;
	text-decoration: none;
}

.terrasuite-card__title a:hover {
	text-decoration: underline;
}

.terrasuite-card__where,
.terrasuite-card__distance,
.terrasuite-card__ref,
.terrasuite-card__excerpt {
	margin: 0;
	color: var(--terrasuite-muted);
	font-size: .9rem;
}

.terrasuite-card__ref {
	margin-top: .35rem;
	font-size: .78rem;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.terrasuite-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .9rem;
	margin: .25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
	color: var(--terrasuite-ink);
}

.terrasuite-card__facts li + li::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: .55rem;
	border-radius: 50%;
	background: var(--terrasuite-muted);
	vertical-align: middle;
}

.terrasuite-empty {
	padding: 2rem;
	border: 1px dashed var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface-2);
	text-align: center;
}

.terrasuite-pager {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin: 2rem 0 0;
}

.terrasuite-pager a,
.terrasuite-pager__current {
	display: inline-block;
	min-width: 2.4rem;
	padding: .5em .8em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	color: var(--terrasuite-ink);
}

.terrasuite-pager__current {
	background: var(--terrasuite-accent);
	border-color: var(--terrasuite-accent);
	color: var(--terrasuite-accent-contrast);
	font-weight: 700;
}

/* Property page ----------------------------------------------------------- */

.terrasuite-property__header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.terrasuite-property__title {
	margin: 0 0 .3rem;
}

.terrasuite-property__where {
	margin: 0;
	color: var(--terrasuite-muted);
}

.terrasuite-property__price {
	margin: 0 0 .5rem;
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--terrasuite-accent);
}

.terrasuite-property__status {
	margin: 0 0 .5rem;
	font-weight: 600;
}

.terrasuite-gallery {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 2rem;
}

.terrasuite-gallery__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--terrasuite-surface-2);
}

.terrasuite-gallery__item--first {
	grid-column: span 4;
	aspect-ratio: 16 / 9;
}

.terrasuite-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * A GRID ON A DESKTOP, A CAROUSEL ON A TELEPHONE.
 *
 * The script wraps the photographs in a track and adds the controls once. What
 * that structure *means* is left to CSS, so turning a phone sideways cannot
 * lose the visitor's place and there is no resize handler to get wrong.
 *
 * Above the breakpoint the track is display:contents, so the figures remain
 * direct grid children and the grid is exactly what it was before any of this
 * existed. Nothing changes for a desktop visitor.
 *
 * Below it, four thumbnails on a 390px screen are four postage stamps. One
 * photograph at a time, with arrows and a count, is how every portal shows a
 * house on a phone, and it is the screen most enquiries come from.
 */
.terrasuite-gallery__track {
	display: contents;
}

.terrasuite-gallery__controls {
	display: none;
}

@media (max-width: 900px) {
	.terrasuite-gallery--enhanced {
		display: block;
		position: relative;
		overflow: hidden;
		border-radius: 8px;
	}

	.terrasuite-gallery--enhanced .terrasuite-gallery__track {
		display: flex;
		transition: transform .3s ease;
	}

	.terrasuite-gallery--enhanced .terrasuite-gallery__item,
	.terrasuite-gallery--enhanced .terrasuite-gallery__item--first {
		flex: 0 0 100%;
		aspect-ratio: 4 / 3;
		border-radius: 0;
	}

	.terrasuite-gallery--enhanced .terrasuite-gallery__controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: .6rem .7rem;
		background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
	}

	.terrasuite-gallery__arrow {
		width: 2.4rem;
		height: 2.4rem;
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, .92);
		color: #1d2327;
		font-size: 1.4rem;
		line-height: 1;
		cursor: pointer;
	}

	.terrasuite-gallery__arrow:focus-visible {
		outline: 2px solid var(--terrasuite-accent);
		outline-offset: 2px;
	}

	.terrasuite-gallery__count {
		margin: 0;
		color: #fff;
		font-size: .82rem;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.terrasuite-gallery__track {
		transition: none;
	}
}

.terrasuite-property__body {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	align-items: start;
}

.terrasuite-property__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	margin: 0 0 1.5rem;
	padding: 1rem 0;
	border-top: 1px solid var(--terrasuite-line);
	border-bottom: 1px solid var(--terrasuite-line);
	list-style: none;
}

.terrasuite-fact__value {
	display: block;
	font-size: 1.35rem;
	font-weight: 700;
}

.terrasuite-fact__label {
	display: block;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--terrasuite-muted);
}

.terrasuite-property__keypoints {
	margin: 0 0 1.5rem;
	padding-left: 1.2rem;
}

.terrasuite-property__keypoints li {
	margin-bottom: .3rem;
}

.terrasuite-property__features ul {
	display: grid;
	gap: .3rem 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	margin: 0;
	padding-left: 1.2rem;
}

.terrasuite-property__details dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .4rem 1.5rem;
	margin: 0;
}

.terrasuite-property__details dt {
	font-weight: 600;
	color: var(--terrasuite-muted);
}

.terrasuite-property__details dd {
	margin: 0;
}

.terrasuite-property__side {
	position: sticky;
	top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.terrasuite-property__actions {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.terrasuite-property__staff {
	margin-top: 2rem;
	padding: 1rem 1.2rem;
	border: 1px dashed #b58b00;
	border-radius: var(--terrasuite-radius);
	background: rgba(255, 205, 0, .07);
}

/* Forms ------------------------------------------------------------------- */

.terrasuite-form {
	padding: 1.5rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
	box-shadow: var(--terrasuite-shadow);
}

.terrasuite-form > * + * {
	margin-top: 1.1rem;
}

.terrasuite-form__title {
	margin: 0 0 .5rem;
	font-size: 1.15rem;
}

.terrasuite-form fieldset {
	margin: 0;
	padding: 1.2rem 0 0;
	border: 0;
	border-top: 1px solid var(--terrasuite-line);
}

.terrasuite-form fieldset legend {
	padding: 0 .6rem 0 0;
	font-weight: 700;
}

/* Slot picker ------------------------------------------------------------- */

.terrasuite-slots {
	margin: 0;
	padding: 0;
	border: 0;
}

.terrasuite-slots__days {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	padding-bottom: .5rem;
	margin-bottom: 1rem;
}

.terrasuite-slots__day {
	flex: 0 0 auto;
	padding: .6rem .9rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: 10px;
	background: var(--terrasuite-surface);
	color: var(--terrasuite-ink);
	font: inherit;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.terrasuite-slots__day.is-active {
	border-color: var(--terrasuite-accent);
	background: var(--terrasuite-accent);
	color: var(--terrasuite-accent-contrast);
}

.terrasuite-slots__dow {
	display: block;
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .8;
}

.terrasuite-slots__dom {
	display: block;
	font-weight: 700;
}

.terrasuite-slots__times {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.terrasuite-slots__time input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.terrasuite-slots__time span {
	display: inline-block;
	padding: .55em 1em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 999px;
	cursor: pointer;
}

.terrasuite-slots__time input:checked + span {
	border-color: var(--terrasuite-accent);
	background: var(--terrasuite-accent);
	color: var(--terrasuite-accent-contrast);
	font-weight: 600;
}

.terrasuite-slots__time input:focus-visible + span {
	outline: 2px solid var(--terrasuite-accent);
	outline-offset: 2px;
}

/* Map --------------------------------------------------------------------- */

.terrasuite-mapsearch__controls {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	align-items: end;
	margin-bottom: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
}

.terrasuite-mapsearch__map,
.terrasuite-propertymap__canvas {
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	overflow: hidden;
	z-index: 0;
}

.terrasuite-mapsearch__hint {
	margin: 0 0 .75rem;
	color: var(--terrasuite-muted);
	font-size: .9rem;
}

.terrasuite-mapsearch__count {
	margin: .75rem 0;
	font-weight: 600;
}

.terrasuite-mapsearch__results {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.terrasuite-mapcard {
	display: block;
	border: 1px solid var(--terrasuite-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--terrasuite-surface);
	text-decoration: none;
	color: inherit;
}

.terrasuite-mapcard img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.terrasuite-mapcard__price,
.terrasuite-mapcard__title {
	display: block;
	padding: 0 .6rem;
}

.terrasuite-mapcard__price {
	padding-top: .5rem;
	font-weight: 700;
	color: var(--terrasuite-accent);
}

.terrasuite-mapcard__title {
	padding-bottom: .6rem;
	font-size: .88rem;
	color: var(--terrasuite-muted);
}

.terrasuite-pin img {
	width: 100%;
	max-width: 220px;
	border-radius: 6px;
	display: block;
	margin-bottom: .4rem;
}

.terrasuite-pin__price {
	margin: 0;
	font-weight: 700;
}

.terrasuite-pin__title {
	margin: .2rem 0;
}

.terrasuite-pin__facts {
	margin: 0;
	color: #62707c;
	font-size: .85em;
}

/* Account, knowledgebase, assistant --------------------------------------- */

.terrasuite-account__block,
.terrasuite-panel {
	margin-bottom: 2.5rem;
}

.terrasuite-account__list,
.terrasuite-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.terrasuite-account__list li,
.terrasuite-list li {
	padding: .75rem 0;
	border-bottom: 1px solid var(--terrasuite-line);
}

.terrasuite-account__meta {
	display: block;
	color: var(--terrasuite-muted);
	font-size: .88rem;
}

.terrasuite-table {
	width: 100%;
	border-collapse: collapse;
}

.terrasuite-table th,
.terrasuite-table td {
	padding: .7rem .6rem;
	border-bottom: 1px solid var(--terrasuite-line);
	text-align: left;
	vertical-align: top;
}

.terrasuite-bookings__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
}

.terrasuite-bookings__item {
	padding: 1rem 1.2rem;
	border: 1px solid var(--terrasuite-line);
	border-left-width: 4px;
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
}

.terrasuite-bookings__item--confirmed { border-left-color: #1a7f37; }
.terrasuite-bookings__item--requested { border-left-color: #b58b00; }
.terrasuite-bookings__item--declined,
.terrasuite-bookings__item--cancelled { border-left-color: #b32d2e; }

.terrasuite-bookings__when {
	margin: 0;
	font-weight: 700;
}

.terrasuite-bookings__what,
.terrasuite-bookings__status,
.terrasuite-bookings__reason {
	margin: .2rem 0 0;
}

.terrasuite-bookings__status {
	color: var(--terrasuite-muted);
	font-size: .9rem;
}

.terrasuite-kb__search {
	display: flex;
	gap: .5rem;
	align-items: flex-end;
	margin-bottom: 2rem;
}

.terrasuite-kb__search label {
	display: block;
	margin-bottom: .35rem;
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--terrasuite-muted);
}

.terrasuite-kb__search input {
	flex: 1;
	padding: .65em .8em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 8px;
	background: var(--terrasuite-surface);
	color: var(--terrasuite-ink);
	font: inherit;
}

.terrasuite-kb__categories {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.terrasuite-kb__category ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.terrasuite-kb__category li {
	padding: .5rem 0;
	border-bottom: 1px solid var(--terrasuite-line);
}

.terrasuite-kb__excerpt {
	display: block;
	color: var(--terrasuite-muted);
	font-size: .88rem;
}

.terrasuite-kb-feedback {
	margin-top: 2.5rem;
	padding: 1.2rem;
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface-2);
}

.terrasuite-kb-feedback p {
	margin: 0 0 .7rem;
	font-weight: 600;
}

.terrasuite-kb-market-notice {
	margin-bottom: 1.5rem;
	padding: 1.2rem;
	border-radius: var(--terrasuite-radius);
	border: 1px solid var(--terrasuite-line);
	background: var(--terrasuite-surface-2);
}

.terrasuite-kb-market-notice p {
	margin: 0 0 .7rem;
}

.terrasuite-kb-market-notice p:last-child {
	margin-bottom: 0;
}

.terrasuite-assistant {
	padding: 1.5rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
	box-shadow: var(--terrasuite-shadow);
}

.terrasuite-assistant__form label {
	display: block;
	margin-bottom: .5rem;
	font-weight: 600;
}

.terrasuite-assistant__form textarea {
	width: 100%;
	padding: .7em .85em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 8px;
	background: var(--terrasuite-surface);
	color: var(--terrasuite-ink);
	font: inherit;
	resize: vertical;
}

.terrasuite-assistant__form button {
	margin-top: .75rem;
}

.terrasuite-assistant__output {
	margin-top: 1.25rem;
}

.terrasuite-assistant__thinking {
	color: var(--terrasuite-muted);
	font-style: italic;
}

.terrasuite-assistant__cites,
.terrasuite-assistant__note {
	color: var(--terrasuite-muted);
	font-size: .88rem;
}

.terrasuite-assistant__badge {
	display: inline-block;
	margin: 0 0 .6rem;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	border: 1px solid var(--terrasuite-line);
}

.terrasuite-assistant__badge--kb {
	background: var(--terrasuite-accent);
	color: var(--terrasuite-accent-contrast);
	border-color: var(--terrasuite-accent);
}

.terrasuite-assistant__badge--external {
	background: var(--terrasuite-surface-2);
	color: var(--terrasuite-muted);
}

.terrasuite-assistant-sources {
	margin: 0;
	padding: 0;
	list-style: none;
}

.terrasuite-assistant-sources li {
	padding: .5rem 0;
	border-bottom: 1px solid var(--terrasuite-line);
}

.terrasuite-areacard {
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	overflow: hidden;
	background: var(--terrasuite-surface);
}

.terrasuite-areacard img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.terrasuite-areacard h3,
.terrasuite-areacard p {
	margin: 0;
	padding: 0 1rem;
}

.terrasuite-areacard h3 {
	padding-top: 1rem;
}

.terrasuite-areacard p {
	padding-bottom: 1rem;
	color: var(--terrasuite-muted);
	font-size: .92rem;
}

.terrasuite-agency__logo img {
	max-width: 180px;
	height: auto;
}

.terrasuite-agency__contact {
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}

.terrasuite-agency__contact li {
	margin-bottom: .4rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Narrow screens ---------------------------------------------------------- */

@media (max-width: 900px) {
	.terrasuite-property__body {
		grid-template-columns: 1fr;
	}

	.terrasuite-property__side {
		position: static;
	}

	.terrasuite-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.terrasuite-gallery__item--first {
		grid-column: span 2;
	}

	.terrasuite-card--list {
		flex-direction: column;
	}

	.terrasuite-card--list .terrasuite-card__media {
		flex: none;
		max-width: none;
		aspect-ratio: 4 / 3;
	}
}

/* Video ------------------------------------------------------------------- */

.terrasuite-video {
	margin: 0 0 1.5rem;
	position: relative;
	overflow: hidden;
	border-radius: var(--terrasuite-radius);
	background: #10171d;
}

.terrasuite-video.is-16-9 { aspect-ratio: 16 / 9; }
.terrasuite-video.is-4-3  { aspect-ratio: 4 / 3; }
.terrasuite-video.is-1-1  { aspect-ratio: 1 / 1; }
.terrasuite-video.is-9-16 { aspect-ratio: 9 / 16; max-width: 22rem; }

.terrasuite-video video,
.terrasuite-video iframe,
.terrasuite-video__cover {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.terrasuite-video__cover {
	position: relative;
}

.terrasuite-video__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The play button is drawn rather than fetched, so the facade costs one image
   request in total and works before any script has run. */
.terrasuite-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.5rem;
	height: 3.2rem;
	border-radius: 0.8rem;
	background: rgba(17, 17, 17, .78);
	transition: background .2s ease, transform .2s ease;
}

.terrasuite-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: .6rem 0 .6rem 1rem;
	border-color: transparent transparent transparent #fff;
}

.terrasuite-video__cover:hover .terrasuite-video__play,
.terrasuite-video__cover:focus-visible .terrasuite-video__play {
	background: #cc0000;
	transform: translate(-50%, -50%) scale(1.06);
}

.terrasuite-video figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: .6rem .9rem;
	background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7));
	color: #fff;
	font-size: .88rem;
}

/* Reviews ----------------------------------------------------------------- */

.terrasuite-reviews {
	margin: 0 0 2rem;
}

.terrasuite-reviews__heading {
	margin-bottom: .75rem;
}

.terrasuite-reviews__summary {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	margin: 0 0 1.25rem;
}

.terrasuite-reviews__score {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.terrasuite-reviews__count {
	color: var(--terrasuite-muted);
}

.terrasuite-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.terrasuite-review {
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.terrasuite-review__text {
	margin: 0;
	border: 0;
	padding: 0;
	font-style: normal;
	quotes: none;
}

.terrasuite-review__by {
	margin: auto 0 0;
	font-size: .88rem;
}

.terrasuite-review__author { font-weight: 600; }

.terrasuite-review__when,
.terrasuite-reviews__source {
	color: var(--terrasuite-muted);
	font-size: .85rem;
}

.terrasuite-review__link { margin: 0; font-size: .85rem; }

.terrasuite-star {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .05em;
	background: currentColor;
	opacity: .22;
	-webkit-mask: var(--terrasuite-star) center / contain no-repeat;
	mask: var(--terrasuite-star) center / contain no-repeat;
}

.terrasuite-star.is-on {
	opacity: 1;
	color: #f5a623;
}

.terrasuite-reviews {
	--terrasuite-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.3 5.8 21l1.6-7L2 9.2l7.1-.6L12 2l2.9 6.6 7.1.6-5.4 4.8 1.6 7z'/%3E%3C/svg%3E");
}

/* Languages --------------------------------------------------------------- */

.terrasuite-langs ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
}

.terrasuite-langs--list ul {
	flex-direction: column;
	gap: .3rem;
}

.terrasuite-langs__link {
	text-decoration: none;
	font-size: .9rem;
}

.terrasuite-langs__link.is-current {
	font-weight: 700;
	text-decoration: underline;
}

/* WhatsApp ---------------------------------------------------------------- */

.terrasuite-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	background: #25d366;
	color: #fff;
	border-radius: 999px;
	padding: .6rem 1.1rem;
	font-weight: 600;
	line-height: 1;
}

.terrasuite-whatsapp:hover,
.terrasuite-whatsapp:focus {
	background: #1da851;
	color: #fff;
}

.terrasuite-whatsapp--float {
	position: fixed;
	bottom: 1.25rem;
	z-index: 900;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.terrasuite-whatsapp--float.is-right { right: 1.25rem; }
.terrasuite-whatsapp--float.is-left  { left: 1.25rem; }

/* The label is there for a screen reader and for the tooltip, but a circle in
   the corner does not need a word beside it. */
.terrasuite-whatsapp--float .terrasuite-whatsapp__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media print {
	.terrasuite-whatsapp--float { display: none; }
}

/* ---------------------------------------------------------------------- */
/* The "choose several" control                                            */
/* ---------------------------------------------------------------------- */

/*
 * This replaced <select multiple size="1">. That element looked like a tidy
 * one-line dropdown and behaved like nothing anybody expects: the browser
 * writes its own summary into the closed box, and Chrome's reads "0 selected".
 * It was not our text, not translatable, and different in every browser.
 *
 * A details element with checkboxes in it costs a few lines of CSS and gives us
 * back the sentence, so the box can say "Any area" or name the towns.
 */

.terrasuite-chooser__label {
	display: block;
	margin-bottom: .35rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--terrasuite-muted);
}

.terrasuite-chooser__wrap {
	position: relative;
}

.terrasuite-chooser__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	padding: .65em .8em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 8px;
	background: var(--terrasuite-surface);
	color: var(--terrasuite-ink);
	font: inherit;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

/* Safari draws its own triangle through ::-webkit-details-marker. */
.terrasuite-chooser__summary::-webkit-details-marker {
	display: none;
}

.terrasuite-chooser__summary::after {
	content: "";
	flex: none;
	width: .5em;
	height: .5em;
	margin-top: -.2em;
	border-right: 2px solid var(--terrasuite-muted);
	border-bottom: 2px solid var(--terrasuite-muted);
	transform: rotate(45deg);
}

.terrasuite-chooser__wrap[open] .terrasuite-chooser__summary::after {
	margin-top: .2em;
	transform: rotate(-135deg);
}

.terrasuite-chooser__summary:focus-visible {
	outline: 2px solid var(--terrasuite-accent);
	outline-offset: 1px;
}

/*
 * The panel floats over what is below it, so opening it does not shove the
 * rest of the form down the page. It is capped in height because an agency
 * with sixty towns would otherwise open a list taller than the screen.
 */
.terrasuite-chooser__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	max-height: 17rem;
	overflow-y: auto;
	padding: .5rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: 8px;
	background: var(--terrasuite-surface);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

/*
 * A COVER BLOCK CLIPS WHAT HANGS OUT OF IT.
 *
 * WordPress core sets `overflow: clip` on .wp-block-cover so the background
 * photograph cannot escape it. A search form put inside a hero cover - which
 * is where nearly every estate agency site puts it - then has its "Where" and
 * "Property type" panels cut off at the bottom edge of the hero, because they
 * are ordinary elements in the page. The "Bedrooms" field looked correct
 * beside them only because a native select is drawn by the browser in its own
 * top layer, above the document entirely, and never touches the clip at all.
 *
 * So the clip is lifted, and only while a panel is actually open. The
 * background image is absolutely positioned to the cover's own box, so it does
 * not move when the clip goes.
 */
.wp-block-cover:has(.terrasuite-chooser__wrap[open]),
.wp-block-cover:has(.terrasuite-savesearch[open]) {
	overflow: visible;
}

.terrasuite-chooser__group {
	margin: .5rem 0 .25rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--terrasuite-muted);
}

.terrasuite-chooser__group:first-child {
	margin-top: 0;
}

.terrasuite-field .terrasuite-chooser__option {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	padding: .3em .35em;
	border-radius: 6px;
	font-size: .95rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--terrasuite-ink);
	cursor: pointer;
}

.terrasuite-field .terrasuite-chooser__option:hover {
	background: var(--terrasuite-tint, rgba(0, 0, 0, .04));
}

.terrasuite-chooser__done {
	display: block;
	width: 100%;
	margin-top: .5rem;
	padding: .5em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 6px;
	background: transparent;
	color: var(--terrasuite-ink);
	font: inherit;
	cursor: pointer;
}

/*
 * On a phone a floating panel anchored to a narrow field is cramped, so it
 * uses the full width of the form instead.
 */
@media (max-width: 600px) {
	.terrasuite-chooser__panel {
		position: static;
		max-height: 13rem;
		margin-top: .4rem;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Energy grades and floorplans                                            */
/* ---------------------------------------------------------------------- */

/*
 * The grade colours are the EPC and Spanish CEE bands, which run the same way
 * in both schemes: A dark green through G red. People read the colour before
 * the letter, so getting them wrong is worse than not colouring them at all.
 */

.terrasuite-energy {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.terrasuite-energy__item {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.terrasuite-energy__grade {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 6px;
	background: var(--terrasuite-muted);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1;
}

.terrasuite-energy__grade--a { background: #007f3d; }
.terrasuite-energy__grade--b { background: #2c9f29; }
.terrasuite-energy__grade--c { background: #8dce46; color: #103010; }
.terrasuite-energy__grade--d { background: #ffd500; color: #3a3000; }
.terrasuite-energy__grade--e { background: #fcaa65; color: #3a2000; }
.terrasuite-energy__grade--f { background: #ef8023; }
.terrasuite-energy__grade--g { background: #e9153b; }

/* Exempt or in progress. Not a band, so not a band colour. */
.terrasuite-energy__grade--x {
	background: transparent;
	border: 2px dashed var(--terrasuite-line);
	color: var(--terrasuite-muted);
}

.terrasuite-energy__caption {
	display: flex;
	flex-direction: column;
	font-size: .9rem;
}

.terrasuite-energy__caption small {
	color: var(--terrasuite-muted);
	font-size: .8rem;
}

.terrasuite-floorplan {
	margin: 0 0 1.25rem;
}

.terrasuite-floorplan img {
	width: 100%;
	height: auto;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	/* Floorplans are line drawings on white and vanish on a dark ground. */
	background: #fff;
}

.terrasuite-floorplan figcaption {
	margin-top: .4rem;
	font-size: .85rem;
	color: var(--terrasuite-muted);
}

/* ---------------------------------------------------------------------- */
/* Save this search                                                        */
/* ---------------------------------------------------------------------- */

.terrasuite-savesearch {
	position: relative;
}

.terrasuite-savesearch__summary {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .5em .9em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 999px;
	background: var(--terrasuite-surface);
	color: var(--terrasuite-ink);
	font-size: .9rem;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.terrasuite-savesearch__summary::-webkit-details-marker {
	display: none;
}

.terrasuite-savesearch__summary:focus-visible {
	outline: 2px solid var(--terrasuite-accent);
	outline-offset: 1px;
}

.terrasuite-savesearch[open] .terrasuite-savesearch__summary {
	border-color: var(--terrasuite-accent);
}

/*
 * Anchored to the right, because the control sits at the right-hand end of
 * the results bar and a panel hanging off the left edge would leave the page.
 */
.terrasuite-savesearch__form {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	right: 0;
	width: min(24rem, 90vw);
	padding: 1rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
	text-align: left;
}

.terrasuite-savesearch__what {
	margin: 0 0 .9rem;
	font-size: .9rem;
	color: var(--terrasuite-muted);
}

.terrasuite-savesearch__form .terrasuite-field {
	margin-bottom: .75rem;
}

.terrasuite-savesearch__form button {
	width: 100%;
}

@media (max-width: 600px) {
	.terrasuite-savesearch__form {
		position: static;
		width: auto;
		margin-top: .6rem;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------- */
/* What it would cost                                                      */
/* ---------------------------------------------------------------------- */

.terrasuite-calc {
	margin: 2rem 0;
	padding: 1.25rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
}

.terrasuite-calc__title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
}

.terrasuite-calc__controls {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	margin-bottom: 1.25rem;
}

.terrasuite-calc__block + .terrasuite-calc__block {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--terrasuite-line);
}

.terrasuite-calc__block h3 {
	margin: 0 0 .6rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--terrasuite-muted);
}

/*
 * Label on the left, figure on the right, and the figures line up with each
 * other because a column of money that does not line up is hard to read.
 */
.terrasuite-calc__lines {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .3rem 1rem;
	margin: 0 0 .75rem;
}

.terrasuite-calc__lines dt {
	margin: 0;
	color: var(--terrasuite-muted);
}

.terrasuite-calc__lines dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.terrasuite-calc__total {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding-top: .4rem;
	font-variant-numeric: tabular-nums;
}

.terrasuite-calc__total--grand {
	margin-top: .4rem;
	padding-top: .5rem;
	border-top: 1px solid var(--terrasuite-line);
	font-size: 1.05rem;
}

.terrasuite-calc__monthly {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	margin: 0 0 .35rem;
}

.terrasuite-calc__monthly strong {
	font-size: 1.6rem;
	font-variant-numeric: tabular-nums;
}

.terrasuite-calc__borrowed {
	margin: 0;
	color: var(--terrasuite-muted);
	font-size: .9rem;
}

/*
 * The note says which region the rates are for and when they were checked.
 * Quiet, but never hidden: an estimate that does not say what it assumed is a
 * liability rather than a help.
 */
.terrasuite-calc__note {
	margin: 1.25rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid var(--terrasuite-line);
	color: var(--terrasuite-muted);
	font-size: .8rem;
	line-height: 1.5;
}

.terrasuite-calc__noscript {
	margin: 0;
	color: var(--terrasuite-muted);
	font-size: .85rem;
}

.terrasuite-calc--compact .terrasuite-calc__controls {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* ---------------------------------------------------------------------- */
/* Comparing properties                                                    */
/* ---------------------------------------------------------------------- */

/*
 * A comparison table is the one thing on the site that legitimately wants to
 * be wider than the screen: four columns of numbers cannot be reflowed into
 * one without becoming four lists, which is the problem it was built to solve.
 * So it scrolls inside its own box and the page never does.
 */
.terrasuite-compare__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.terrasuite-compare__table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: .95rem;
}

.terrasuite-compare__table th,
.terrasuite-compare__table td {
	padding: .6rem .7rem;
	border-bottom: 1px solid var(--terrasuite-line);
	text-align: left;
	vertical-align: top;
}

.terrasuite-compare__table thead th {
	border-bottom: 2px solid var(--terrasuite-line);
	vertical-align: bottom;
}

.terrasuite-compare__table thead img {
	display: block;
	width: 100%;
	max-width: 12rem;
	height: auto;
	margin-bottom: .4rem;
	border-radius: 8px;
}

.terrasuite-compare__table thead a {
	display: block;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	line-height: 1.3;
}

.terrasuite-compare__table thead a:hover span {
	text-decoration: underline;
}

/*
 * The row headings stay put while the columns scroll, which is the whole
 * difference between a table you can read sideways and one you cannot.
 */
.terrasuite-compare__table tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--terrasuite-surface);
	font-weight: 600;
	white-space: nowrap;
	color: var(--terrasuite-muted);
}

.terrasuite-compare__table tbody tr:nth-child(even) th,
.terrasuite-compare__table tbody tr:nth-child(even) td {
	background: var(--terrasuite-tint, rgba(0, 0, 0, .025));
}

.terrasuite-compare__toggle {
	margin: .9rem 0 0;
}

.terrasuite-compare__toggle button {
	padding: .45em .9em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 999px;
	background: transparent;
	color: var(--terrasuite-ink);
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
}

.terrasuite-shortlist__compare {
	margin: 1.5rem 0 2rem;
}

.terrasuite-shortlist__compare > summary {
	padding: .5em 0;
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Keep me posted                                                          */
/* ---------------------------------------------------------------------- */

.terrasuite-newsletter {
	margin: 2rem 0;
	padding: 1.5rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
}

.terrasuite-newsletter__heading {
	margin: 0 0 .35rem;
	font-size: 1.2rem;
}

.terrasuite-newsletter__intro {
	margin: 0 0 1rem;
	color: var(--terrasuite-muted);
}

/*
 * Two fields and a button on one line where there is room, stacked where
 * there is not. Anything more elaborate would be an enquiry form wearing a
 * hat, which is the mistake this box exists to avoid.
 */
.terrasuite-newsletter__fields {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	align-items: end;
}

.terrasuite-newsletter__fields .terrasuite-field--submit button {
	width: 100%;
}

/* ---------------------------------------------------------------------- */
/* The people who work there                                               */
/* ---------------------------------------------------------------------- */

.terrasuite-team__heading {
	margin: 0 0 1.25rem;
}

.terrasuite-team__list {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.terrasuite-team__photo {
	width: 100%;
	max-width: 160px;
	height: auto;
	margin-bottom: .6rem;
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

.terrasuite-team__name {
	margin: 0;
	font-size: 1.05rem;
}

.terrasuite-team__title {
	margin: .1rem 0 .4rem;
	color: var(--terrasuite-muted);
	font-size: .9rem;
}

/* On the Costa Blanca this is the line a Dutch or Norwegian buyer reads first. */
.terrasuite-team__languages {
	margin: 0 0 .5rem;
	font-size: .85rem;
}

.terrasuite-team__bio {
	margin: 0 0 .6rem;
	font-size: .9rem;
	line-height: 1.5;
}

.terrasuite-team__contact,
.terrasuite-team__listings {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .8rem;
	margin: 0 0 .3rem;
	font-size: .9rem;
}

.terrasuite-property__negotiator {
	margin-top: 1.5rem;
	padding: 1rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
	text-align: center;
}

.terrasuite-property__negotiator h2 {
	margin: 0 0 .75rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--terrasuite-muted);
}

.terrasuite-property__negotiator img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.terrasuite-property__negotiator-name {
	margin: .5rem 0 0;
	font-weight: 600;
}

.terrasuite-property__negotiator-title,
.terrasuite-property__negotiator-langs {
	margin: .1rem 0 0;
	color: var(--terrasuite-muted);
	font-size: .85rem;
}

/* ---------------------------------------------------------------------- */
/* Viewing trips                                                           */
/* ---------------------------------------------------------------------- */

.terrasuite-trip {
	margin: 2rem 0;
}

/*
 * What the trip includes comes first and reads as a list, because a visitor
 * choosing between three agencies is choosing on this and not on the form.
 */
.terrasuite-trip__includes {
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface-2, var(--terrasuite-surface));
}

.terrasuite-trip__includes h3 {
	margin: 0 0 .6rem;
	font-size: 1rem;
}

.terrasuite-trip__includes ul {
	margin: 0;
	padding-left: 1.1rem;
	line-height: 1.7;
}

.terrasuite-trip__form .terrasuite-search__row + .terrasuite-search__row,
.terrasuite-trip__form .terrasuite-field {
	margin-top: 1rem;
}

.terrasuite-trip__form textarea {
	width: 100%;
	padding: .65em .8em;
	border: 1px solid var(--terrasuite-line);
	border-radius: 8px;
	background: var(--terrasuite-surface);
	color: var(--terrasuite-ink);
	font: inherit;
}

.terrasuite-trip__form > button {
	margin-top: 1.25rem;
}

/*
 * Said out loud, under the button. A form that looks as though it commits
 * somebody to a flight is a form nobody sends.
 */
.terrasuite-trip__note {
	margin: .6rem 0 0;
	color: var(--terrasuite-muted);
	font-size: .85rem;
}

/* ---------------------------------------------------------------------- */
/* Extra services                                                          */
/* ---------------------------------------------------------------------- */

.terrasuite-services {
	margin: 2rem 0;
}

.terrasuite-services__heading {
	margin: 0 0 1.25rem;
}

.terrasuite-services__list {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.terrasuite-services__item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
}

.terrasuite-services__image {
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.terrasuite-services__body {
	padding: 1rem 1.1rem 1.2rem;
}

.terrasuite-services__name {
	margin: 0;
	font-size: 1.05rem;
}

/*
 * The price is the point of the screen. An agency willing to put a number
 * next to "collected from the airport" looks like one that has done it before,
 * and "on request" against everything looks like one deciding what to charge
 * based on who is asking.
 */
.terrasuite-services__price {
	margin: .25rem 0 .6rem;
	font-weight: 700;
	color: var(--terrasuite-accent);
}

.terrasuite-services__what {
	font-size: .92rem;
	line-height: 1.55;
}

.terrasuite-services__what p {
	margin: 0 0 .5rem;
}

.terrasuite-services__ask {
	margin: 0 0 .75rem;
	font-size: 1.05rem;
}

.terrasuite-services__choices {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.terrasuite-services__choices legend {
	padding: 0;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--terrasuite-muted);
}

.terrasuite-services__choices label {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	margin: .5rem 0 0;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--terrasuite-ink);
}

/* The price sits under the name rather than beside it, so a long name wraps
 * without pushing the figure out of the row. */
.terrasuite-services__choices label span {
	display: flex;
	flex-direction: column;
}

.terrasuite-services__choices label small {
	color: var(--terrasuite-muted);
}

.terrasuite-services__note {
	margin: .6rem 0 0;
	color: var(--terrasuite-muted);
	font-size: .85rem;
}

/* ==================================================================== width
 *
 * THE PLUGIN'S OWN SCREENS ARE NOT PROSE AND MUST NOT BE MEASURED LIKE IT.
 *
 * A block theme constrains anything that is not alignwide or alignfull to
 * theme.json's contentSize, which exists so a paragraph of writing does not
 * run to eighty words a line. That is right for an area guide and wrong for
 * everything below: a property page, a results grid, a map, a diary, an
 * account area. Measured on the demonstration site before this rule, the
 * property page sat in 760px of a 1425px screen - fifty-three per cent - with
 * its main column at 440px, thirty-one per cent.
 *
 * WordPress writes that constraint as
 *   :where(.is-layout-constrained) > :not(.alignleft)... { max-width: ... }
 * and :where() carries no specificity, so a single class of ours overrides it
 * without !important and without touching the theme.
 *
 * --ts-page-width is a custom property so a theme, or an agency, can set its
 * own without editing this file.
 */
.terrasuite-property,
.terrasuite-results,
.terrasuite-search,
.terrasuite-mapsearch,
.terrasuite-account,
.terrasuite-bookings,
.terrasuite-shortlist,
.terrasuite-compare,
.terrasuite-areas,
.terrasuite-services,
.terrasuite-team,
.terrasuite-reviews,
.terrasuite-slots,
.terrasuite-savesearch,
.terrasuite-browse {
	max-width: var(--ts-page-width, 1360px);
	width: 100%;
	margin-inline: auto;
}

/*
 * AND THE WRAPPER THE THEME PUT AROUND US.
 *
 * Setting a width on our own container is not enough: the theme renders a
 * property inside .entry-content, which the block layout has already capped at
 * contentSize. A child cannot be wider than its parent, so the rule above did
 * nothing on the one page that needed it most - measured at 53 per cent of the
 * screen with the rule in place.
 *
 * :has() lets the wrapper stand down when, and only when, it is holding one of
 * our screens. An area guide or a blog post in the same wrapper keeps its
 * reading measure, which is what contentSize is for.
 */
.entry-content:has(> .terrasuite-property),
.entry-content:has(> .terrasuite-results),
.entry-content:has(> .terrasuite-mapsearch),
.entry-content:has(> .terrasuite-account),
.entry-content:has(> .terrasuite-bookings),
.entry-content:has(> .terrasuite-shortlist),
.entry-content:has(> .terrasuite-compare),
.wp-block-post-content:has(> .terrasuite-property),
.wp-block-post-content:has(> .terrasuite-results),
.wp-block-post-content:has(> .terrasuite-mapsearch),
.wp-block-post-content:has(> .terrasuite-account),
.wp-block-post-content:has(> .terrasuite-bookings),
.wp-block-post-content:has(> .terrasuite-shortlist),
.wp-block-post-content:has(> .terrasuite-compare) {
	max-width: none;
}

/*
 * THE TRUST LINE BELONGS TO THE PLUGIN, SO ITS SPACING MUST TOO.
 *
 * The plugin's own front-page content emits `.ts-hero__trust` with a span per
 * selling point, but the only stylesheet that laid them out was the agency
 * theme's. Under any other theme the three ran together as one sentence -
 * "Local knowledge, not a call centre Viewings you book yourself Told the
 * moment something matches" - which is what the free demonstration site had
 * been showing on its front page.
 *
 * This is a floor, not a design: colour and size are left to the theme, and
 * the agency theme's own rules still win because they load after this.
 */
.ts-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.75rem;
	margin-top: 1.5rem;
}

.ts-hero__trust span {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.ts-hero__trust span::before {
	content: "";
	flex: none;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: currentColor;
	opacity: .55;
}

/* ============================================ the journey-time field
 *
 * Three controls - how long, how you travel, and from where - were sharing
 * one 170px grid column, so each got about fifty pixels and read "30", "dri"
 * and "of". The credit underneath wrapped to five lines and pushed the next
 * field down the page.
 *
 * So the field takes the whole row, and the three controls get widths that
 * suit what is in them: the time is short, the mode is a word, and the place
 * name can be long. On a telephone the first two sit side by side and the
 * place name has the line to itself, which is the one that needs it.
 */
.terrasuite-field--reach {
	/*
	 * SPAN TRACKS, NEVER `1 / -1`.
	 *
	 * The row is repeat(auto-fit, minmax(170px, 1fr)), and an item spanning
	 * to the last line of an auto-fit grid collapses the repeat to a single
	 * track - every other field went full width and the form got half again
	 * as tall. Spanning a fixed number of tracks asks for room without
	 * telling the grid how many tracks to have.
	 *
	 * Two on a telephone, where the row is two tracks and this is the whole
	 * width. Three above that: the row is three tracks at 768 and seven at
	 * 1680, so it is the full width on a tablet and a comfortable third of a
	 * wide screen, rather than three small boxes in a 400px slot beside a
	 * row 1600px across.
	 */
	grid-column: span 2;
}

@media (min-width: 700px) {
	.terrasuite-field--reach {
		grid-column: span 3;
	}
}

.terrasuite-field--reach .terrasuite-field__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
}

/* The origin, which carries a place name, gets the full line on a phone. */
.terrasuite-field--reach .terrasuite-field__pair > select:last-of-type {
	grid-column: 1 / -1;
}

.terrasuite-field--reach select {
	font-size: 1rem;
	padding: .7em .8em;
}

@media (min-width: 700px) {
	.terrasuite-field--reach .terrasuite-field__pair {
		grid-template-columns: minmax(8rem, 0.8fr) minmax(8rem, 0.9fr) minmax(12rem, 1.6fr);
	}

	.terrasuite-field--reach .terrasuite-field__pair > select:last-of-type {
		grid-column: auto;
	}
}

/* The routing credit, once, at the foot of the panel. */
.terrasuite-search__credit {
	margin: 1rem 0 0;
	font-size: .82rem;
	color: var(--terrasuite-muted);
}

/*
 * ANY CONTROL THIS PLUGIN DRAWS HAS A VISIBLE EDGE.
 *
 * Last in the file, and a catch-all rather than a list, because the list was
 * the problem: --terrasuite-line was used for both hairlines and control
 * borders in forty-five places, and the ones on controls were failing WCAG
 * 1.4.11 at 1.40:1 on every page of every install. A rule that names the
 * controls rather than the places cannot be missed off when a new field is
 * added next year.
 *
 * Only where the border is ours to set: a control that has been given its own
 * border colour further up keeps it.
 */
.terrasuite input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.terrasuite select,
.terrasuite textarea,
.terrasuite button,
[class^="terrasuite-"] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
[class*=" terrasuite-"] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
[class^="terrasuite-"] select,
[class*=" terrasuite-"] select,
[class^="terrasuite-"] textarea,
[class*=" terrasuite-"] textarea,
[class^="terrasuite-"] button,
[class*=" terrasuite-"] button,
button[class^="terrasuite-"],
button[class*=" terrasuite-"] {
	border-color: var(--terrasuite-edge);
}

/* A form in steps --------------------------------------------------------- */

/*
 * Only once the script has taken over does a step hide; the hidden attribute is
 * set by it, so without script every fieldset shows as one long form.
 */
.terrasuite-step[hidden] {
	display: none;
}

.terrasuite-form .terrasuite-step:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.terrasuite-step > * + * {
	margin-top: 1.1rem;
}

.terrasuite-steps__count {
	margin: 0;
	color: var(--terrasuite-muted);
	font-size: .85rem;
}

.terrasuite-steps__nav {
	display: flex;
	justify-content: space-between;
	gap: .75rem;
}

.terrasuite-steps__nav .terrasuite-button:only-child {
	margin-left: auto;
}

/* The estimate shown after a valuation request ----------------------------- */

.terrasuite-estimate {
	padding: 1.5rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
	box-shadow: var(--terrasuite-shadow);
}

.terrasuite-estimate__range {
	margin: .25rem 0 .5rem;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.terrasuite-estimate__basis,
.terrasuite-estimate__source {
	color: var(--terrasuite-muted);
	font-size: .9rem;
}

.terrasuite-estimate__sales {
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

.terrasuite-estimate__sales th,
.terrasuite-estimate__sales td {
	padding: .4rem .5rem;
	border-bottom: 1px solid var(--terrasuite-line);
	text-align: left;
}

.terrasuite-estimate__sales td:last-child,
.terrasuite-estimate__sales th:last-child {
	text-align: right;
}

.terrasuite-estimate__scroll {
	overflow-x: auto;
}

/* Sharing a shortlist ------------------------------------------------------ */

.terrasuite-shortlist__share {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--terrasuite-line);
	border-radius: var(--terrasuite-radius);
	background: var(--terrasuite-surface);
}

.terrasuite-shortlist__share > * + * {
	margin-top: .6rem;
}

.terrasuite-shortlist__share label {
	display: block;
	font-weight: 600;
}

.terrasuite-shortlist__share input[type="url"] {
	flex: 1 1 18rem;
	min-width: 0;
}

.terrasuite-shortlist__alerts {
	color: var(--terrasuite-muted);
	font-size: .9rem;
}

/* The photographer's name under an area guide's picture. Small and quiet, but
   present: a CC BY photograph may not be published without it. */
.terrasuite-photo-credit {
	color: var(--terrasuite-muted);
	font-size: .78rem;
	margin: .35rem 0 0;
}

.terrasuite-photo-credit a {
	color: inherit;
	text-decoration: none;
}

.terrasuite-photo-credit a:hover,
.terrasuite-photo-credit a:focus {
	text-decoration: underline;
}