/* Nút tim lưu: PHP in bằng vo_heart() (inc/ui-core.php), site.js bật/tắt và lưu.
   aria-pressed="true" = đã lưu. Biến thể --text: nút chữ Save / Saved (--row: dòng Saved, search.css). */

.vo-heart {
	/* Chỉnh ở đây */
	--vo-heart-size: 36px;                              /* Cỡ nút tròn */
	--vo-heart-icon: 20px;                              /* Cỡ icon tim */
	--vo-heart-bg: var(--vo-glass);                     /* Nền nút (trắng mờ trên ảnh) */

	display: inline-grid;
	place-items: center;
	width: var(--vo-heart-size);
	height: var(--vo-heart-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vo-heart-bg);
	box-shadow: var(--vo-shadow-sm);
	color: var(--vo-ink);
	font-size: var(--vo-heart-icon);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--vo-dur-fast) var(--vo-ease), background-color var(--vo-dur-fast) var(--vo-ease);
}
/* ::before nới vùng bấm ~44px dù nút nhỏ hơn */
.vo-heart { position: relative; }                   /* card / hero đè absolute bằng selector mạnh hơn */
.vo-heart::before { content: ""; position: absolute; inset: -4px; }
.vo-heart > .vo-icon { grid-area: 1 / 1; transform: translateZ(0); }   /* giữ icon ở lớp riêng cả lúc đứng yên: Safari không gỡ lớp ở cuối animation nên tim không khựng 1px khi vẽ lại */
.vo-heart__on { display: none; color: var(--vo-heart); }
.vo-heart[aria-pressed="true"] .vo-heart__on { display: block; }
.vo-heart[aria-pressed="true"] .vo-heart__off { display: none; }
@media (hover: hover) {
	.vo-heart:hover { transform: scale(1.04); }
}
.vo-heart:active { transform: scale(.96); }

/* Nảy khi vừa lưu */
.vo-heart.is-pop .vo-heart__on { animation: vo-heart-pop 300ms var(--vo-ease); }
@keyframes vo-heart-pop {
	0% { transform: scale(.8) translateZ(0); }
	55% { transform: scale(1.1) translateZ(0); }
	100% { transform: scale(1) translateZ(0); }
}

/* Xẹp nhẹ khi bỏ lưu. Dòng trong panel Saved (--row) không có hiệu ứng */
.vo-heart.is-out:not(.vo-heart--row) .vo-heart__off { animation: vo-heart-out var(--vo-dur) ease-out; }
@keyframes vo-heart-out {
	from { transform: scale(1.25) translateZ(0); opacity: .4; }
	to { transform: scale(1) translateZ(0); opacity: 1; }
}

/* Nút có chữ */
.vo-heart--text {
	display: inline-flex;
	width: auto;
	height: auto;
	box-shadow: none;
	border-radius: var(--vo-radius-pill);
	font-size: var(--_fs, inherit);   /* = cỡ chữ .vo-button (nút Share cạnh bên) */
}
.vo-heart--text .vo-icon { font-size: 1.15em; }
.vo-heart--text[aria-pressed="true"] .vo-heart__on { display: inline-block; }
@media (hover: hover) {
	.vo-heart--text:hover { transform: none; }
}

/* Tim bay từ nút về icon Saved ở header, chỉ >980px (assets/js/fly.js tạo) */
.vo-fly {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--vo-z-overlay);
	width: 28px;
	height: 28px;
	color: var(--vo-heart);
	font-size: 28px;
	pointer-events: none;
}

/* Số đếm Saved: chỉ ở ô Saved đầu menu mobile (header.css đặt vị trí); icon trên header không có số, vì chỉ đếm Saved mà không đếm My trips thì gây hiểu nhầm */
.vo-saved-icon, .vo-account-icon { position: relative; }
.vo-menu__tile.vo-saved-icon[data-count]::after {
	content: attr(data-count);
	position: absolute;
	top: 0;
	right: -4px;
	z-index: 1;                                       /* trên nền hover của icon kế bên */
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: calc(var(--vo-text-drop) * 2) 5px 0;     /* hạ số cho đúng tâm */
	border-radius: var(--vo-radius-pill);
	background: var(--vo-primary);
	color: var(--vo-on-primary);
	font-size: var(--vo-fs-2xs);
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
	.vo-heart, .vo-heart.is-pop .vo-heart__on, .vo-heart.is-out .vo-heart__off { transition: none; animation: none; }
}