/*
 * The wishlist.
 *
 * The heart sits over the corner of a card's image, as the homepage reference
 * shows it. Colour and radius come from the child theme's tokens; the fallbacks
 * are there so the button is still legible if a page loads without them.
 */

/*
 * The class is doubled on purpose. Elementor's global button style is written
 * as a kit class plus the `button` element, which outrules a single class of
 * ours — the heart came out as a wide teal pill until this matched harder.
 * Doubling a class we own beats it on specificity without an !important that
 * every later rule would then have to fight.
 */
.bc-favourite.bc-favourite {
	position: absolute;
	top: var( --bc-space-2, 8px );
	right: var( --bc-space-2, 8px );
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var( --bc-radius-pill, 999px );
	background-color: rgba( 255, 255, 255, 0.92 );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.18 );
	color: var( --bc-ink-soft, #484848 );
	cursor: pointer;
	transition: transform var( --bc-duration-fast, 150ms ) var( --bc-ease, ease ),
		color var( --bc-duration-fast, 150ms ) var( --bc-ease, ease );
}

.bc-favourite.bc-favourite:hover,
.bc-favourite.bc-favourite:focus-visible {
	transform: scale( 1.08 );
	color: var( --bc-sky-deep, #046f8d );
}

.bc-favourite.bc-favourite[disabled] {
	cursor: progress;
	opacity: 0.6;
}

/* The heart itself, drawn rather than loaded: one more request for one icon. */

.bc-favourite__mark {
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask-image: var( --bc-heart );
	mask-image: var( --bc-heart );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

:root {
	--bc-heart: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.1-8-10.4A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 3.6C20 15.9 12 21 12 21z'/%3E%3C/svg%3E" );
}

.bc-favourite.bc-favourite.is-saved {
	color: var( --bc-danger, #c13515 );
}

/*
 * A card with no image has nothing to float the heart over, so it takes its
 * place in the flow instead of landing on the title.
 */

.bc-card--no-media .bc-favourite.bc-favourite {
	position: static;
	align-self: flex-end;
	margin: 0 0 var( --bc-space-2, 8px ) auto;
}

/* A card needs to be a positioning context for the heart to sit on it. */

.bc-card,
.mphb-room-type {
	position: relative;
}

/*
 * The header controls.
 *
 * Icon-only buttons, as the reference shows them: no slab, no label, and a
 * target big enough to hit. The class is doubled for the same reason the heart
 * is — Elementor's global button style is a kit class plus the element.
 */

.bc-header-icon.bc-header-icon .elementor-button {
	padding: var( --bc-space-2, 8px );
	border-radius: var( --bc-radius-pill, 999px );
	background-color: transparent;
	color: var( --bc-ink, #222 );
	font-size: var( --bc-text-md, 18px );
}

.bc-header-icon.bc-header-icon .elementor-button:hover,
.bc-header-icon.bc-header-icon .elementor-button:focus-visible {
	background-color: var( --bc-paper-soft, #f7f7f7 );
	color: var( --bc-sky-deep, #046f8d );
}

/*
 * The header link, and its count. The count rides on the heart's corner rather
 * than taking a line of its own, so the heart stays level with the icons
 * beside it whether anything is saved or not.
 */

.bc-favourites-link {
	position: relative;
}

.bc-favourites-link .elementor-button-text:empty {
	display: none;
}

.bc-favourites-link__count {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
	min-width: 1.25rem;
	padding: 0 var( --bc-space-1, 4px );
	pointer-events: none;
	transform: translate( 25%, -25% );
	border-radius: var( --bc-radius-pill, 999px );
	background-color: var( --bc-sky-deep, #046f8d );
	color: #fff;
	font-size: var( --bc-text-xs, 12px );
	line-height: 1.25rem;
	text-align: center;
}

.bc-favourites-link__count[hidden] {
	display: none;
}

/* The saved page. */

.bc-favourites {
	display: flex;
	flex-direction: column;
	gap: var( --bc-space-4, 16px );
}

/*
 * Saved things come from every door, so their photographs arrive in every
 * shape. One frame for all of them, the same 4:3 the lodging and experience
 * grids use, keeps the row even; the photograph is cropped to fill it.
 */

.bc-favourites__grid {
	align-items: stretch;
}

.bc-card--saved .bc-card__media {
	aspect-ratio: var( --bc-media-ratio, 4 / 3 );
}

.bc-favourites__note {
	margin: 0;
	color: var( --bc-ink-mute, #717171 );
}

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

	.bc-favourite.bc-favourite:hover,
	.bc-favourite.bc-favourite:focus-visible {
		transform: none;
	}
}