/**
 * Wishlist — heart toggle + saved-courses page.
 *
 * Tokens only. The heart is a clean line (no shadow): empty = neutral outline,
 * saved = filled --bto-danger. It sits on the card's bottom row to the left of
 * the price (not over the image), and on the course-detail title row.
 */

.bto-wish-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;               /* tap target */
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Never inherit the parent theme's <button> hover/focus chrome (GeneratePress
   gives bare buttons a dark background box). */
.bto-wish-heart:hover,
.bto-wish-heart:focus,
.bto-wish-heart:active {
	background: none;
	box-shadow: none;
	border: 0;
	color: inherit;
}

.bto-wish-heart svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: none;
	stroke: var(--bto-ink, #1c1d1f);   /* resting: ink line */
	stroke-width: 1.8;
	stroke-linejoin: round;
	stroke-linecap: round;
	transition: fill .15s ease, stroke .15s ease, transform .12s ease;
}

.bto-wish-heart:hover svg {
	stroke: var(--bto-danger, #f12243);
}

.bto-wish-heart.is-saved svg {
	fill: var(--bto-danger, #f12243);
	stroke: var(--bto-danger, #f12243);
}

.bto-wish-heart:active svg {
	transform: scale(.86);
}

.bto-wish-heart:focus-visible {
	outline: 2px solid var(--bto-danger, #f12243);
	outline-offset: 2px;
	border-radius: var(--bto-radius-sm, 8px);
}

/* Card bottom row: heart (left) + from-price (right). Replaces the price as the
   card's last child, so it carries the margin-top:auto that pins it to the
   bottom; the price inside no longer needs its own auto margin. */
.bto-course-card-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 8px;
}

.bto-course-card-foot .bto-wish-heart {
	width: 36px;
	height: 36px;
	margin-left: -8px;      /* pull the icon to the card's content edge */
}

.bto-course-card-foot .bto-course-card-price {
	margin: 0;              /* neutralize the listing.css margin-top:auto inside the row */
	padding-top: 0;
}

/* Course-detail hero: heart overlaid on the image's bottom-left corner (the
   View Gallery pill sits bottom-right, so no collision). Pure white line over
   the photo, a touch larger here; hover/saved go red like everywhere else. */
.bto-gc-hero {
	position: relative;   /* the gallery pill already relies on this */
}

.bto-gc-hero .bto-wish-heart {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	width: 44px;
	height: 44px;
	z-index: 2;
}

.bto-gc-hero .bto-wish-heart svg {
	width: 28px;          /* a little larger only on the hero */
	height: 28px;
	stroke: var(--bto-surface, #ffffff);   /* pure white resting line */
}

.bto-gc-hero .bto-wish-heart:hover svg {
	stroke: var(--bto-danger, #f12243);
}

.bto-gc-hero .bto-wish-heart.is-saved svg {
	fill: var(--bto-danger, #f12243);
	stroke: var(--bto-danger, #f12243);
}

/* Wishlist page — grid is .bto-listing-grid (reused); only the empty state is new. */
.bto-wish-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	color: var(--bto-muted, #656c70);
}

.bto-wish-empty p {
	margin: 0 0 1rem;
}

.bto-wish-loading {
	min-height: 40vh;
}