/**
 * HP Add to Favorite — Stylesheet
 * Author: Iqra Saleem
 * Version: 1.0.0
 */

/* ============================================================
   HEART BUTTON
   ============================================================ */
.hp-favorite-btn {
	background     : #ffffff;
	border         : 2px solid #e0e0e0;
	border-radius  : 50%;
	width          : 42px;
	height         : 42px;
	min-width      : 42px;
	cursor         : pointer;
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	padding        : 0;
	margin         : 0;
	flex-shrink    : 0;
	transition     : transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
	box-shadow     : 0 2px 8px rgba(0, 0, 0, 0.10);
	position       : relative;
	z-index        : 10;
	vertical-align : middle;
	line-height    : 1;
}

/* Hover — any state */
.hp-favorite-btn:hover {
	transform   : scale(1.18);
	border-color: #e74c3c;
	box-shadow  : 0 5px 18px rgba(231, 76, 60, 0.28);
}

.hp-favorite-btn:hover .hp-heart-icon {
	fill  : rgba(231, 76, 60, 0.12);
	stroke: #e74c3c;
}

/* Active / Favorited state */
.hp-favorite-btn.hp-fav-active {
	border-color: #e74c3c;
	background  : #fff5f5;
}

.hp-favorite-btn.hp-fav-active .hp-heart-icon {
	fill  : #e74c3c;
	stroke: #e74c3c;
}

/* Focus ring for accessibility */
.hp-favorite-btn:focus-visible {
	outline       : 3px solid #e74c3c;
	outline-offset: 2px;
}

/* SVG icon */
.hp-heart-icon {
	display       : block;
	transition    : fill 0.22s ease, stroke 0.22s ease;
	pointer-events: none;
}

/* ============================================================
   LOADING SPINNER (shows while AJAX is in flight)
   ============================================================ */
.hp-fav-loading {
	opacity       : 0.55;
	pointer-events: none;
}

.hp-fav-loading::after {
	content      : '';
	position     : absolute;
	inset        : 4px;
	border-radius: 50%;
	border       : 2px solid #e74c3c;
	border-top   : 2px solid transparent;
	animation    : hp-fav-spin 0.65s linear infinite;
}

@keyframes hp-fav-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */
#hp-fav-toast {
	position      : fixed;
	bottom        : 28px;
	left          : 50%;
	transform     : translateX(-50%) translateY(14px);
	padding       : 12px 24px;
	border-radius : 10px;
	font-size     : 14px;
	font-weight   : 600;
	color         : #ffffff;
	opacity       : 0;
	transition    : opacity 0.3s ease, transform 0.3s ease;
	z-index       : 999999;
	pointer-events: none;
	white-space   : nowrap;
	box-shadow    : 0 6px 24px rgba(0, 0, 0, 0.18);
	letter-spacing: 0.01em;
}

#hp-fav-toast.hp-toast-show {
	opacity  : 1;
	transform: translateX(-50%) translateY(0);
}

#hp-fav-toast.hp-toast-add    { background: #27ae60; }
#hp-fav-toast.hp-toast-remove { background: #e74c3c; }
#hp-fav-toast.hp-toast-error  { background: #e67e22; }

/* ============================================================
   MY FAVORITES GRID  [hp_my_favorites]
   ============================================================ */
.hp-favorites-grid {
	display              : grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap                  : 20px;
	margin-top           : 24px;
}

.hp-fav-card {
	background   : #ffffff;
	border       : 1px solid #eeeeee;
	border-radius: 12px;
	overflow     : hidden;
	box-shadow   : 0 2px 12px rgba(0, 0, 0, 0.07);
	transition   : box-shadow 0.22s ease, transform 0.22s ease;
}

.hp-fav-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
	transform : translateY(-2px);
}

.hp-fav-card__thumb {
	display: block;
	overflow: hidden;
}

.hp-fav-card__thumb img {
	width     : 100%;
	height    : 170px;
	object-fit: cover;
	display   : block;
	transition: transform 0.3s ease;
}

.hp-fav-card:hover .hp-fav-card__thumb img {
	transform: scale(1.04);
}

.hp-fav-card__body {
	display        : flex;
	align-items    : center;
	justify-content: space-between;
	padding        : 14px 16px;
	gap            : 10px;
}

.hp-fav-card__title {
	font-size      : 14px;
	font-weight    : 600;
	color          : #222222;
	text-decoration: none;
	flex           : 1;
	white-space    : nowrap;
	overflow       : hidden;
	text-overflow  : ellipsis;
	transition     : color 0.2s ease;
}

.hp-fav-card__title:hover {
	color: #e74c3c;
}

/* ============================================================
   NOTICE (empty state / login message)
   ============================================================ */
.hp-fav-notice {
	background   : #f8f9fa;
	border       : 1px solid #e9ecef;
	border-radius: 8px;
	padding      : 16px 20px;
	color        : #555555;
	font-size    : 14px;
	margin-top   : 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
	.hp-favorites-grid {
		grid-template-columns: 1fr;
	}

	#hp-fav-toast {
		font-size: 13px;
		padding  : 10px 18px;
		bottom   : 16px;
	}
}