/*
 * Save (favourites) and compare: card and page buttons, the compare tray,
 * the Saved Properties, Property Comparison and Saved Count blocks.
 *
 * Colours, radii and spacing come from the theme's presets and --swish-*
 * variables, so every style variation (including noir) restyles them.
 */

.swish-visually-hidden {
	block-size: 1px;
	border: 0;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.swish-shortlist-icon {
	fill: none;
	flex: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.75;
}

/* ------------------------------------------------------------- buttons */

.swish-save,
.swish-compare-toggle {
	align-items: center;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #dce5df);
	border-radius: var(--swish-radius-pill, 999px);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink, #102322);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: var(--wp--preset--font-size--metadata, 0.875rem);
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1.2;
	margin: 0;
	min-block-size: 44px;
	padding: 0 1rem;
	position: relative;
	transition: background-color var(--wp--custom--motion--duration, 200ms) ease, border-color var(--wp--custom--motion--duration, 200ms) ease;
}

.swish-save[hidden],
.swish-compare-toggle[hidden] {
	display: none;
}

.swish-save:hover,
.swish-compare-toggle:hover {
	border-color: var(--wp--preset--color--ink, #102322);
}

.swish-save[aria-pressed="true"] .swish-shortlist-icon--heart {
	fill: currentcolor;
}

.swish-save[aria-pressed="true"] {
	color: var(--wp--preset--color--accent-dark, #0f6b57);
}

.swish-save[aria-pressed="true"] .swish-save__label {
	color: var(--wp--preset--color--ink, #102322);
}

/* The compare box: an empty square that fills and shows a tick when chosen. */
.swish-compare-toggle__box {
	align-items: center;
	block-size: 1.125rem;
	border: 2px solid currentcolor;
	border-radius: 4px;
	box-sizing: border-box;
	display: inline-flex;
	flex: none;
	inline-size: 1.125rem;
	justify-content: center;
}

.swish-compare-toggle__box .swish-shortlist-icon {
	block-size: 0.875rem;
	inline-size: 0.875rem;
	stroke-width: 3;
	visibility: hidden;
}

.swish-compare-toggle[aria-pressed="true"] {
	border-color: var(--wp--preset--color--accent-dark, #0f6b57);
}

.swish-compare-toggle[aria-pressed="true"] .swish-compare-toggle__box {
	background: var(--wp--preset--color--accent-dark, #0f6b57);
	border-color: var(--wp--preset--color--accent-dark, #0f6b57);
	color: var(--wp--preset--color--on-accent-dark, #fff);
}

.swish-compare-toggle[aria-pressed="true"] .swish-compare-toggle__box .swish-shortlist-icon {
	visibility: visible;
}

/* On a card: a round heart at the top end of the photo, Compare at the bottom start. */
.swish-card__actions .swish-save--card {
	block-size: 44px;
	border-color: transparent;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
	inline-size: 44px;
	padding: 0;
}

.swish-card__actions .swish-compare-toggle--card {
	border-color: transparent;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
	inset-block-end: 0.75rem;
	inset-inline-start: 0.75rem;
	min-block-size: 2.25rem;
	padding: 0 0.75rem 0 0.625rem;
	position: absolute;
}

/* A 44px target around the smaller pill. */
.swish-card__actions .swish-compare-toggle--card::after {
	content: "";
	inset: -4px;
	position: absolute;
}

.swish-card__actions .swish-save--card:hover,
.swish-card__actions .swish-compare-toggle--card:hover {
	border-color: var(--wp--preset--color--ink, #102322);
}

.swish-card__actions .swish-compare-toggle--card[aria-pressed="true"] {
	border-color: var(--wp--preset--color--accent-dark, #0f6b57);
}

.swish-card__actions .swish-save--card .swish-shortlist-icon {
	block-size: 22px;
	inline-size: 22px;
}

.swish-card__actions :focus-visible {
	outline: 3px solid var(--swish-focus, #102322);
	outline-offset: 2px;
}

/* On a listing page: labelled buttons after the price and address. */
.swish-shortlist-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 0.5rem);
}

@media (min-width: 600px) {

	.swish-summary > .swish-shortlist-actions {
		margin-inline-start: auto;
	}
}

.swish-shortlist-actions--icon .swish-save,
.swish-shortlist-actions--icon .swish-compare-toggle {
	inline-size: 44px;
	padding: 0;
}

/* ---------------------------------------------------------------- tray */

.swish-tray {
	background: var(--wp--preset--color--surface, #fff);
	border-block-start: 1px solid var(--wp--preset--color--border, #dce5df);
	box-shadow: 0 -6px 24px rgb(0 0 0 / 0.08);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink, #102322);
	inset-block-end: var(--swish-tray-offset, 0);
	inset-inline: 0;
	padding: var(--wp--preset--spacing--30, 0.75rem) max(var(--wp--preset--spacing--40, 1rem), env(safe-area-inset-right)) max(var(--wp--preset--spacing--30, 0.75rem), env(safe-area-inset-bottom)) max(var(--wp--preset--spacing--40, 1rem), env(safe-area-inset-left));
	position: fixed;
	z-index: 9;
}

.swish-tray[hidden] {
	display: none;
}

.swish-tray__inner {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--50, 1.5rem);
	grid-template-columns: auto minmax(0, 1fr) auto;
	margin-inline: auto;
	max-inline-size: var(--wp--style--global--wide-size, 1280px);
}

.swish-tray__head {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.swish-tray__title {
	font-family: var(--wp--preset--font-family--manrope, inherit);
	font-weight: 700;
	margin: 0;
}

.swish-tray__count {
	color: var(--wp--preset--color--muted, #5f716e);
	font-size: var(--wp--preset--font-size--metadata, 0.875rem);
	margin: 0;
}

.swish-tray__toggle {
	display: none;
}

.swish-tray__items {
	display: grid;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	grid-auto-columns: minmax(0, 18rem);
	grid-auto-flow: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.swish-tray__item,
.swish-tray__slot {
	align-items: center;
	border-radius: var(--swish-radius-control, 10px);
	box-sizing: border-box;
	display: flex;
	gap: 0.5rem;
	min-block-size: 3.5rem;
	min-inline-size: 0;
}

.swish-tray__item {
	background: var(--wp--preset--color--surface-alt, #eaf0eb);
	padding: 0.25rem 0.25rem 0.25rem 0.375rem;
}

.swish-tray__slot {
	border: 1px dashed var(--wp--preset--color--border, #dce5df);
	color: var(--wp--preset--color--muted, #5f716e);
	font-size: 0.8125rem;
	line-height: 1.3;
	padding: 0.25rem 0.75rem;
}

.swish-tray__item img,
.swish-tray__thumb {
	block-size: 2.75rem;
	border-radius: calc(var(--swish-radius-control, 10px) - 4px);
	flex: none;
	inline-size: 2.75rem;
	object-fit: cover;
}

.swish-tray__thumb {
	background: var(--wp--preset--color--border, #dce5df);
}

.swish-tray__item a,
.swish-tray__item > span:not(.swish-tray__thumb) {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: inherit;
	display: -webkit-box;
	flex: 1;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	min-inline-size: 0;
	overflow: hidden;
	text-decoration: none;
}

.swish-tray__item a:hover {
	text-decoration: underline;
}

.swish-tray__remove,
.swish-tray__toggle {
	align-items: center;
	background: transparent;
	block-size: 44px;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	flex: none;
	inline-size: 44px;
	justify-content: center;
	padding: 0;
}

.swish-tray__remove {
	display: inline-flex;
}

.swish-tray__remove svg,
.swish-tray__toggle svg,
.swish-compare__remove svg {
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.swish-tray__remove:hover,
.swish-tray__toggle:hover {
	background: var(--wp--preset--color--surface, #fff);
}

.swish-tray__actions {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--20, 0.5rem);
}

.swish-tray__clear {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	min-block-size: 44px;
	padding: 0 0.75rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.swish-tray .swish-tray__go {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	min-block-size: 44px;
	padding-block: 0.5rem;
	white-space: nowrap;
}

.swish-tray__go[hidden] {
	display: none;
}

@media (max-width: 1023.98px) {

	.swish-tray__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.swish-tray__items {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* Phones: one compact row. The chosen homes open above it on request. */
@media (max-width: 781.98px) {

	.swish-tray__inner {
		gap: var(--wp--preset--spacing--20, 0.5rem);
	}

	.swish-tray__head {
		align-items: center;
		flex-direction: row;
		gap: 0.25rem;
		min-inline-size: 0;
	}

	.swish-tray__head p {
		white-space: nowrap;
	}

	.swish-tray__title {
		display: none;
	}

	.swish-tray__toggle {
		display: inline-flex;
		order: -1;
	}

	.swish-tray__toggle svg {
		transform: rotate(0deg);
	}

	.swish-tray.is-open .swish-tray__toggle svg {
		transform: rotate(180deg);
	}

	.swish-tray__items {
		display: none;
		grid-auto-flow: row;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr);
		max-block-size: 50vh;
		overflow-y: auto;
	}

	.swish-tray.is-open .swish-tray__items {
		display: grid;
	}

	.swish-tray__slot {
		display: none;
	}

	.swish-tray__clear {
		padding: 0 0.5rem;
	}
}

/* A short note for something that did not happen, such as a full list. */
.swish-shortlist-toast {
	background: var(--wp--preset--color--scrim, #0b1918);
	border-radius: var(--swish-radius-control, 10px);
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.2);
	box-sizing: border-box;
	color: var(--wp--preset--color--on-scrim, #fff);
	font-size: var(--wp--preset--font-size--metadata, 0.875rem);
	inline-size: fit-content;
	inset-block-end: calc(var(--swish-toast-offset, 0px) + max(var(--wp--preset--spacing--40, 1rem), env(safe-area-inset-bottom)));
	inset-inline: 0;
	margin: 0 auto;
	max-inline-size: min(32rem, calc(100vw - 2rem));
	opacity: 0;
	padding: 0.75rem 1rem;
	pointer-events: none;
	position: fixed;
	visibility: hidden;
	z-index: 11;
}

.swish-shortlist-toast.is-visible {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {

	.swish-tray {
		animation: swish-tray-in var(--wp--custom--motion--duration, 200ms) ease;
		transition: inset-block-end var(--wp--custom--motion--duration, 200ms) ease;
	}

	.swish-shortlist-toast {
		transition: opacity var(--wp--custom--motion--duration, 200ms) ease, visibility var(--wp--custom--motion--duration, 200ms) ease;
	}

	.swish-save[aria-pressed="true"] .swish-shortlist-icon--heart {
		animation: swish-heart var(--wp--custom--motion--duration, 200ms) ease;
	}
}

@media (prefers-reduced-motion: reduce) {

	.swish-save,
	.swish-compare-toggle {
		transition: none;
	}
}

@keyframes swish-tray-in {

	from {
		transform: translateY(100%);
	}
}

@keyframes swish-heart {

	50% {
		transform: scale(1.2);
	}
}

/* --------------------------------------------------------- saved list */

.swish-saved__status:empty {
	display: none;
}

.swish-saved__status {
	color: var(--wp--preset--color--muted, #5f716e);
	margin-block: 0 var(--wp--preset--spacing--40, 1rem);
}

.swish-saved__empty {
	align-items: center;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #dce5df);
	border-radius: var(--swish-radius-card, 18px);
	display: none;
	flex-direction: column;
	padding: var(--wp--preset--spacing--70, 3rem) var(--wp--preset--spacing--50, 1.5rem);
	text-align: center;
}

.swish-saved[data-state="empty"] .swish-saved__empty {
	display: flex;
}

.swish-saved[data-state="empty"] .swish-saved__grid {
	display: none;
}

.swish-saved__empty-icon {
	align-items: center;
	background: var(--wp--preset--color--surface-alt, #eaf0eb);
	block-size: 4rem;
	border-radius: 50%;
	color: var(--wp--preset--color--accent-dark, #0f6b57);
	display: inline-flex;
	inline-size: 4rem;
	justify-content: center;
	margin-block-end: var(--wp--preset--spacing--40, 1rem);
}

.swish-saved__empty-icon .swish-shortlist-icon {
	block-size: 1.75rem;
	inline-size: 1.75rem;
}

.swish-saved__empty-title {
	font-size: var(--wp--preset--font-size--h-3, 1.5rem);
	margin: 0 0 var(--wp--preset--spacing--20, 0.5rem);
}

.swish-saved__empty-text {
	color: var(--wp--preset--color--muted, #5f716e);
	margin: 0 0 var(--wp--preset--spacing--50, 1.5rem);
	max-inline-size: 32rem;
}

.swish-saved__empty-action {
	margin: 0;
}

.swish-saved__device,
.swish-saved__noscript {
	color: var(--wp--preset--color--muted, #5f716e);
	font-size: var(--wp--preset--font-size--metadata, 0.875rem);
	margin-block: var(--wp--preset--spacing--50, 1.5rem) 0;
}

.swish-saved__device a {
	color: inherit;
}

/* While a guest's list loads, keep the space a row of cards needs. */
.swish-saved[data-state="loading"] .swish-saved__grid:empty {
	min-block-size: 20rem;
}

/* ---------------------------------------------------------- saved count */

.swish-saved-count {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: 0.375rem;
	min-block-size: 44px;
	min-inline-size: 44px;
	text-decoration: none;
}

.swish-saved-count:hover .swish-saved-count__label {
	text-decoration: underline;
}

.swish-saved-count__number {
	background: var(--wp--preset--color--accent-dark, #0f6b57);
	border-radius: var(--swish-radius-pill, 999px);
	color: var(--wp--preset--color--on-accent-dark, #fff);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	min-inline-size: 1.5em;
	padding: 0 0.375em;
	text-align: center;
}

.swish-saved-count__number[hidden] {
	display: none;
}

/* ------------------------------------------------------------ comparison */

.swish-compare {
	--swish-compare-label: 12rem;
	--swish-compare-column: 16rem;
}

.swish-compare[data-state="loading"] > * {
	visibility: hidden;
}

.swish-compare__toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--50, 1.5rem);
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--40, 1rem);
}

.swish-compare__count {
	font-weight: 600;
	margin: 0;
}

.swish-compare__tools {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--40, 1rem);
}

.swish-compare__switch {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
	min-block-size: 44px;
}

.swish-compare__switch input {
	accent-color: var(--wp--preset--color--accent-dark, #0f6b57);
	block-size: 1.25rem;
	inline-size: 1.25rem;
	margin: 0;
}

.swish-compare__share,
.swish-compare__clear {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	min-block-size: 44px;
	padding: 0 0.25rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.swish-compare__clear {
	align-items: center;
	display: inline-flex;
}

.swish-compare__share[hidden] {
	display: none;
}

.swish-compare__note,
.swish-compare__hint {
	color: var(--wp--preset--color--muted, #5f716e);
	font-size: var(--wp--preset--font-size--metadata, 0.875rem);
	margin-block: 0 var(--wp--preset--spacing--30, 0.75rem);
}

.swish-compare__scroll {
	border: 1px solid var(--wp--preset--color--border, #dce5df);
	border-radius: var(--swish-radius-card, 18px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
}

.swish-compare__table {
	background: var(--wp--preset--color--surface, #fff);
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--wp--preset--font-size--metadata, 0.875rem);
	inline-size: 100%;
	table-layout: fixed;
}

.swish-compare__table--1 {
	min-inline-size: calc(var(--swish-compare-label) + var(--swish-compare-column));
}

.swish-compare__table--2 {
	min-inline-size: calc(var(--swish-compare-label) + 2 * var(--swish-compare-column));
}

.swish-compare__table--3 {
	min-inline-size: calc(var(--swish-compare-label) + 3 * var(--swish-compare-column));
}

.swish-compare__table--4 {
	min-inline-size: calc(var(--swish-compare-label) + 4 * var(--swish-compare-column));
}

.swish-compare__table th,
.swish-compare__table td {
	border-block-end: 1px solid var(--wp--preset--color--border, #dce5df);
	padding: 0.75rem 1rem;
	text-align: start;
	vertical-align: top;
}

.swish-compare__table thead td,
.swish-compare__table thead th {
	border-block-end: 0;
	scroll-snap-align: start;
}

.swish-compare__table tbody tr:last-child > * {
	border-block-end: 0;
}

/* The labels stay in view while the homes scroll sideways. */
.swish-compare__table tr > :first-child {
	background: var(--wp--preset--color--surface, #fff);
	border-inline-end: 1px solid var(--wp--preset--color--border, #dce5df);
	inline-size: var(--swish-compare-label);
	inset-inline-start: 0;
	position: sticky;
	z-index: 1;
}

.swish-compare__table tbody th[scope="row"] {
	color: var(--wp--preset--color--muted, #5f716e);
	font-weight: 600;
}

.swish-compare__table tbody td {
	color: var(--wp--preset--color--ink, #102322);
}

.swish-compare__photo {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface-alt, #eaf0eb);
	border-radius: var(--swish-radius-control, 10px);
	overflow: hidden;
	position: relative;
}

.swish-compare__photo-link {
	display: block;
	inset: 0;
	position: absolute;
}

.swish-compare__photo img,
.swish-compare__photo .swish-card__no-image {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.swish-compare__remove {
	align-items: center;
	background: var(--wp--preset--color--surface, #fff);
	block-size: 44px;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
	color: var(--wp--preset--color--ink, #102322);
	display: inline-flex;
	inline-size: 44px;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	justify-content: center;
	position: absolute;
}

.swish-compare__remove:hover {
	background: var(--wp--preset--color--surface-alt, #eaf0eb);
}

.swish-compare__names th {
	padding-block: 0.75rem 1rem;
}

.swish-compare__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: inherit;
	display: -webkit-box;
	font-family: var(--wp--preset--font-family--manrope, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	text-decoration: none;
}

.swish-compare__title:hover {
	text-decoration: underline;
}

.swish-compare__price {
	font-size: 1rem;
}

.swish-compare__group th {
	background: var(--wp--preset--color--surface-alt, #eaf0eb);
	font-family: var(--wp--preset--font-family--manrope, inherit);
	font-weight: 700;
}

/* The group heading spans the table, so it scrolls with it, unlike the labels. */
.swish-compare__table .swish-compare__group > :first-child {
	background: var(--wp--preset--color--surface-alt, #eaf0eb);
	position: static;
}

.swish-compare__yes {
	color: var(--wp--preset--color--accent-dark, #0f6b57);
	font-weight: 700;
}

.swish-compare__no {
	color: var(--wp--preset--color--muted, #5f716e);
}

/*
 * Highlighted differences: the rows whose values differ get a tinted band
 * and a mark beside the label. Works without the script through :has().
 */
.swish-compare:is(.is-highlighting, :has([data-swish-compare-diff]:checked)) tr.is-different > * {
	background: color-mix(in srgb, var(--wp--preset--color--accent, #1aa17f) 12%, var(--wp--preset--color--surface, #fff));
}

.swish-compare:is(.is-highlighting, :has([data-swish-compare-diff]:checked)) tr.is-different > th[scope="row"] {
	box-shadow: inset 4px 0 0 var(--wp--preset--color--accent-dark, #0f6b57);
	color: var(--wp--preset--color--ink, #102322);
}

.swish-compare__empty {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--border, #dce5df);
	border-radius: var(--swish-radius-card, 18px);
	padding: var(--wp--preset--spacing--70, 3rem) var(--wp--preset--spacing--50, 1.5rem);
	text-align: center;
}

.swish-compare__empty-title {
	font-size: var(--wp--preset--font-size--h-3, 1.5rem);
	margin: 0 0 var(--wp--preset--spacing--20, 0.5rem);
}

.swish-compare__empty p {
	color: var(--wp--preset--color--muted, #5f716e);
	margin-inline: auto;
	max-inline-size: 32rem;
}

.swish-compare__empty .wp-element-button {
	color: var(--wp--preset--color--on-accent-dark, #fff);
}

@media (max-width: 781.98px) {

	.swish-compare {
		--swish-compare-label: 7.5rem;
		--swish-compare-column: 11rem;
	}

	.swish-compare__table th,
	.swish-compare__table td {
		padding: 0.625rem 0.75rem;
	}
}

@media (forced-colors: active) {

	.swish-compare:is(.is-highlighting, :has([data-swish-compare-diff]:checked)) tr.is-different > th[scope="row"] {
		border-inline-start: 4px solid highlight;
	}

	.swish-save[aria-pressed="true"],
	.swish-compare-toggle[aria-pressed="true"] {
		border: 2px solid highlight;
	}
}

@media print {

	.swish-tray,
	.swish-shortlist-toast,
	.swish-save,
	.swish-compare-toggle,
	.swish-compare__tools,
	.swish-compare__remove {
		display: none !important;
	}
}