/* ─── Merkliste (Wishlist) ─────────────────────────────────────────── */

:root {
	--sar-orange: var(--nv-c-1, #e87722);
	--sar-navy: #1a3a5c;
}

/* ── Header-Icon (Shortcode [sar-wishlist-icon]) ──
   Default: blaues Umriss-Herz (auf weißem Header → „innen weiß").
   Aktiv (≥1 gemerkt): vollflächig orange + Zähler. Per CSS-Background
   (kses-sicher, kein Inline-SVG nötig). */
.sar-wishlist-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	text-decoration: none;
}

.sar-wishlist-icon__svg {
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3a5c' stroke-width='2'><path d='M12 21S3 14 3 8.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 9 2.5C21 14 12 21 12 21z'/></svg>" );
}

.sar-wishlist-icon.is-active .sar-wishlist-icon__svg {
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e87722'><path d='M12 21S3 14 3 8.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 9 2.5C21 14 12 21 12 21z'/></svg>" );
}

.sar-wishlist-icon__count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--sar-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.sar-wishlist-icon__count[hidden] {
	display: none;
}

/* ── Herz-Button (Karten + TOC) ── */
.sar-wishlist-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: #fff;
	line-height: 0;
}

.sar-wishlist-heart__icon {
	display: block;
	fill: currentColor; /* gefülltes Herz (Karten); TOC überschreibt auf Umriss */
}

.sar-wishlist-heart.is-active {
	color: var(--sar-orange);
}

/* Karten-Variante: rundes, halbtransparentes Feld oben rechts aufs Bild,
   weißes Herz; aktiv → orange. Liegt über dem Karten-Link (z-index). */
.sar-travel-card {
	position: relative;
}

.sar-wishlist-heart--card {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 4;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.28 );
	color: #fff;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.sar-wishlist-heart--card:hover {
	background: rgba( 0, 0, 0, 0.45 );
}

.sar-wishlist-heart--card:active {
	transform: scale( 0.92 );
}

.sar-wishlist-heart--card.is-active {
	background: #fff;
	color: var(--sar-orange);
}

/* TOC-Variante: Herz + „merken" rechts im Sprungmarkenmenü. Das <li> wird
   per margin-left:auto im flex-Menü nach rechts geschoben. */
.sar-toc__item--heart {
	margin-left: auto;
}

.sar-wishlist-heart--toc {
	color: var(--sar-navy);
	font: inherit;
}

/* Kein Button-Hintergrund (Theme setzt sonst beim Button-Hover ein oranges
   Feld). Höhere Spezifität als Neves `button:hover`. */
.sar-wishlist-heart--toc,
.sar-wishlist-heart--toc:hover,
.sar-wishlist-heart--toc:focus,
.sar-wishlist-heart--toc:active {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Umriss-Herz (innen leer). */
.sar-wishlist-heart--toc .sar-wishlist-heart__icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	color: var(--sar-navy);
}

/* „merken"-Text bleibt immer navy. */
.sar-wishlist-heart--toc .sar-wishlist-heart__label {
	color: var(--sar-navy);
}

/* Nur das Herz wird orange – beim Hover und wenn gemerkt. */
.sar-wishlist-heart--toc:hover .sar-wishlist-heart__icon {
	color: var(--sar-orange);
}

.sar-wishlist-heart--toc.is-active .sar-wishlist-heart__icon {
	fill: var(--sar-orange);
	color: var(--sar-orange);
}

.sar-wishlist-heart__label {
	line-height: 1.2;
}