/**
 * The heart on the tour photo, and the saved list in the dashboard.
 *
 * The button itself is deliberately almost unstyled: it is inserted wearing the
 * gallery's own .glass-btn class, so its shape, background and hover already
 * match the Share button beside it. Only what is specific to a heart is set
 * here — the icon, the filled state, and the shake when a save fails.
 *
 * @package CustomTours
 */

/* ==========================================================================
   The heart
   ========================================================================== */

.ct-save {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ct-save__ico {
	display: block;
	width: 16px;
	height: 16px;
	/* Outline until saved. currentColor so the gallery bar decides the colour,
	   exactly as it does for the Share button's text. */
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linejoin: round;
	transition: fill .18s ease, stroke .18s ease, transform .18s ease;
}

.ct-save.is-saved .ct-save__ico {
	fill: #E0245E;
	stroke: #E0245E;
}

/*
 * A small pop on the way in. Only when saving, never when removing — the
 * flourish is a reward for the action people want to feel good about, and
 * replaying it on removal would read as celebrating the wrong thing.
 */
.ct-save.is-saved .ct-save__ico {
	animation: ct-save-pop .28s ease-out;
}

@keyframes ct-save-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.28); }
	100% { transform: scale(1); }
}

/* Somebody who has asked not to see motion gets the colour change alone. */
@media (prefers-reduced-motion: reduce) {

	.ct-save.is-saved .ct-save__ico {
		animation: none;
	}

	.ct-save__ico {
		transition: none;
	}
}

.ct-save[disabled] {
	opacity: .65;
	cursor: default;
}

/*
 * The save did not go through. A brief shake rather than an alert(): the heart
 * has already been put back to its real state, and this only draws the eye to
 * the fact that it moved back.
 */
.ct-save--failed {
	animation: ct-save-shake .3s ease-in-out;
}

@keyframes ct-save-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}

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

	.ct-save--failed {
		animation: none;
		outline: 2px solid #E0245E;
	}
}

/* ==========================================================================
   The saved list in the dashboard
   ==========================================================================
 * Scoped under .ct-dash, whose palette tokens are declared in dashboard.css —
 * both stylesheets are on that page, and the tokens cascade down.
 */

.ct-dash__saved {
	display: grid;
	/* auto-fill rather than a fixed count, so the list reflows on its own
	   between the 1320px panel and a phone. */
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

.ct-dash__saveditem {
	display: flex;
	gap: 12px;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--d-line, #E7E7E3);
	border-radius: 14px;
	background: #fff;
}

.ct-dash__savedthumb {
	flex: 0 0 auto;
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--d-soft, #F5F7FA);
}

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

/* min-width:0 so a long tour name wraps instead of widening the flex row. */
.ct-dash__savedbody {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ct-dash__savedbody h4 {
	margin: 0;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.ct-dash__savedbody h4 a {
	color: var(--d-ink, #1B2733);
	text-decoration: none;
}

.ct-dash__savedbody h4 a:hover {
	color: var(--d-blue, #1689CF);
}

.ct-dash__savedmeta {
	margin: 0;
	font-size: 12.5px;
	color: var(--d-muted, #6B7280);
}

.ct-dash__savedprice {
	margin: 0;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--d-orange, #F68B2D);
}

.ct-dash__savedactions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 6px 0 0;
	font-size: 12.5px;
}

/*
 * Remove is the quieter of the two links on purpose. It is the destructive one,
 * and it should not compete with View tour for a glance.
 */
.ct-dash__removelink {
	color: var(--d-muted, #6B7280);
	text-decoration: none;
}

.ct-dash__removelink:hover {
	color: #8C2B2B;
	text-decoration: underline;
}

@media (max-width: 420px) {

	/* Thumb above the text: side by side, 84px of image leaves too little for
	   the title on a narrow phone. */
	.ct-dash__saveditem {
		flex-direction: column;
	}

	.ct-dash__savedthumb {
		width: 100%;
		height: 140px;
	}
}