/**
 * Vime Favorites Styles
 *
 * @package Vime_WooCommerce_Widgets
 * @since 2.10.0
 */

/* ==========================================================================
   Favorites Button Widget (Elementor)
   ========================================================================== */

.vime-favorites-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	transition: transform 0.2s ease, background-color 0.2s ease;
	position: relative;
	line-height: 1;
}

.vime-favorites-btn:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.vime-favorites-btn .vime-favorites-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease, fill 0.2s ease;
}

/* Toggle icon visibility based on favorite state */
.vime-favorites-btn .vime-favorites-icon--active {
	display: none;
}

.vime-favorites-btn[data-is-favorite="true"] .vime-favorites-icon--normal {
	display: none;
}

.vime-favorites-btn[data-is-favorite="true"] .vime-favorites-icon--active {
	display: inline-flex;
}

/* Toggle text visibility based on favorite state */
.vime-favorites-btn .vime-favorites-text--active {
	display: none;
}

.vime-favorites-btn[data-is-favorite="true"] .vime-favorites-text--normal {
	display: none;
}

.vime-favorites-btn[data-is-favorite="true"] .vime-favorites-text--active {
	display: inline;
}

/* Default colors */
.vime-favorites-btn .vime-favorites-icon--normal i,
.vime-favorites-btn .vime-favorites-icon--normal svg {
	color: #999;
	fill: #999;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.vime-favorites-btn .vime-favorites-icon--active i,
.vime-favorites-btn .vime-favorites-icon--active svg {
	color: #e2401c;
	fill: #e2401c;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* Text label */
.vime-favorites-text {
	font-size: 14px;
	font-weight: 500;
}

/* Pulse Animation */
@keyframes vime-favorites-pulse {
	0% { transform: scale(1); }
	25% { transform: scale(1.3); }
	50% { transform: scale(0.95); }
	75% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

.vime-favorites-btn--animating .vime-favorites-icon {
	animation: vime-favorites-pulse 0.4s ease-in-out;
}

/* ==========================================================================
   My Account Favorites - Common
   ========================================================================== */

.vime-my-account-favorites {
	width: 100%;
}

/* Header */
.vime-favorites-header {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}

.vime-favorites-header__title {
	margin: 0 0 4px;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--vime-text, #333);
	border: none;
	padding: 0;
}

.vime-favorites-header__subtitle {
	margin: 0;
	color: var(--vime-text-light, #888);
	font-size: 0.875rem;
}

/* Remove button - reset all inherited/theme styles (must override Hello Elementor) */
button.vime-favorites-card__remove,
button.vime-favorites-card__remove:focus,
button.vime-favorites-card__remove:hover,
button.vime-favorites-card__remove:active,
button.vime-favorites-card__remove:visited {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	background: transparent !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	color: #999 !important;
	padding: 0 !important;
	margin: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	line-height: 1 !important;
	font-size: 0 !important;
	flex-shrink: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

button.vime-favorites-card__remove {
	transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

button.vime-favorites-card__remove:hover {
	color: #e2401c !important;
	background-color: #fef2f2 !important;
	border-color: #e2401c !important;
}

button.vime-favorites-card__remove svg,
button.vime-favorites-card__remove svg line {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	fill: none !important;
	stroke: currentColor !important;
}

/* Removing animation */
.vime-favorites-card--removing,
.vime-favorites-list__item--removing {
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==========================================================================
   My Account Favorites - LIST LAYOUT (Clean)
   ========================================================================== */

.vime-favorites-list {
	display: flex;
	flex-direction: column;
}

.vime-favorites-list__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid #f0f0f0;
}

.vime-favorites-list__item:last-child {
	border-bottom: none;
}

/* List Image */
.vime-favorites-list__image {
	width: 56px;
	min-width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #f5f5f5;
	flex-shrink: 0;
}

.vime-favorites-list__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.vime-favorites-list__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* List Info */
.vime-favorites-list__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vime-favorites-list__name {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vime-text, #333);
}

.vime-favorites-list__name a {
	color: inherit;
	text-decoration: none;
}

.vime-favorites-list__name a:hover {
	color: var(--vime-primary, #0073aa);
}

.vime-favorites-list__sku {
	font-size: 12px;
	color: #999;
	line-height: 1.3;
}

/* List Price */
.vime-favorites-list__price {
	font-size: 13px;
	font-weight: 600;
	color: var(--vime-text, #333);
	line-height: 1.3;
}

.vime-favorites-list__price del {
	color: #999;
	font-weight: 400;
	font-size: 12px;
}

.vime-favorites-list__price ins {
	text-decoration: none;
	color: #e2401c;
}

/* List Quantity Controls */
.vime-favorites-list__qty {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.vime-favorites-list__qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	color: #999;
	transition: color 0.15s;
}

.vime-favorites-list__qty-btn:hover {
	color: #333;
}

.vime-favorites-list__qty-value {
	min-width: 20px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	user-select: none;
}

/* List remove button */
.vime-my-account-favorites--list .vime-favorites-card__remove {
	position: static;
	opacity: 1;
	transform: none;
	flex-shrink: 0;
}

/* ==========================================================================
   My Account Favorites - GRID LAYOUT (Cards)
   ========================================================================== */

.vime-favorites-grid {
	display: grid;
	grid-template-columns: repeat(var(--vime-fav-columns, 3), 1fr);
	gap: var(--vime-spacing-lg, 1.5rem);
}

.vime-favorites-card {
	background-color: var(--vime-background, #fff);
	border: 1px solid var(--vime-border, #e0e0e0);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}

.vime-favorites-card:hover {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-color: #ccc;
}

/* Card Image */
.vime-favorites-card__image {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: #f7f7f7;
}

.vime-favorites-card__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.vime-favorites-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.vime-favorites-card:hover .vime-favorites-card__image img {
	transform: scale(1.06);
}

/* Grid remove button */
.vime-my-account-favorites--grid button.vime-favorites-card__remove {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	max-width: 30px !important;
	background: rgba(255, 255, 255, 0.9) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: none !important;
	color: #999 !important;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
	z-index: 2;
}

.vime-my-account-favorites--grid .vime-favorites-card:hover button.vime-favorites-card__remove {
	opacity: 1;
	transform: scale(1);
}

.vime-my-account-favorites--grid button.vime-favorites-card__remove:hover {
	background: #e2401c !important;
	color: #fff !important;
	border: none !important;
}

/* Badges */
.vime-favorites-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 10px;
	border-radius: 9999px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.4;
	z-index: 2;
}

.vime-favorites-card__badge--sale {
	background: #e2401c;
	color: #fff;
}

.vime-favorites-card__badge--stock {
	background: #999;
	color: #fff;
}

/* Card Content */
.vime-favorites-card__content {
	padding: 1rem 1rem 0.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vime-favorites-card__title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vime-favorites-card__title a {
	color: var(--vime-text, #333);
	text-decoration: none;
	transition: color 0.2s ease;
}

.vime-favorites-card__title a:hover {
	color: var(--vime-primary, #0073aa);
}

.vime-favorites-card__price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--vime-text, #333);
	line-height: 1.3;
}

.vime-favorites-card__price del {
	color: #999;
	font-weight: 400;
	font-size: 0.875rem;
}

.vime-favorites-card__price ins {
	text-decoration: none;
	color: #e2401c;
}

/* Card Actions */
.vime-favorites-card__actions {
	padding: 0 1rem 1rem;
	display: flex;
	gap: 8px;
}

.vime-favorites-card__cart-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	background: var(--vime-primary, #0073aa);
	color: #fff !important;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center;
	transition: all 0.15s ease;
	line-height: 1.4;
}

.vime-favorites-card__cart-btn:hover {
	background: var(--vime-primary-dark, #005177);
	color: #fff !important;
}

.vime-favorites-card__cart-btn i {
	font-size: 12px;
}

.vime-favorites-card__view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 12px;
	background: transparent;
	color: #666 !important;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none !important;
	transition: all 0.15s ease;
	line-height: 1.4;
}

.vime-favorites-card__view-btn:hover {
	background: #f7f7f7;
	border-color: #ccc;
	color: #333 !important;
}

.vime-favorites-card__view-btn i {
	font-size: 12px;
}

.vime-favorites-card__unavailable {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	background: #f7f7f7;
	color: #999;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: default;
	line-height: 1.4;
}

.vime-favorites-card__unavailable i {
	font-size: 12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
	.vime-favorites-grid {
		grid-template-columns: repeat(min(var(--vime-fav-columns, 3), 2), 1fr);
	}
}

@media (max-width: 767px) {
	.vime-favorites-grid {
		gap: 1rem;
	}

	.vime-favorites-card__content {
		padding: 0.5rem 0.5rem 0.25rem;
	}

	.vime-favorites-card__title {
		font-size: 0.8125rem;
	}

	.vime-favorites-card__price {
		font-size: 0.875rem;
	}

	.vime-favorites-card__actions {
		padding: 0 0.5rem 0.5rem;
		flex-direction: column;
		gap: 6px;
	}

	.vime-favorites-card__cart-btn,
	.vime-favorites-card__view-btn {
		font-size: 0.8125rem;
		padding: 7px 10px;
	}

	.vime-my-account-favorites--grid button.vime-favorites-card__remove {
		opacity: 1;
		transform: scale(1);
	}

	.vime-favorites-header__title {
		font-size: 1.125rem;
	}

	.vime-favorites-list__image {
		width: 48px;
		min-width: 48px;
		height: 48px;
	}

	.vime-favorites-list__item {
		gap: 10px;
		padding: 12px 0;
	}

	.vime-favorites-list__name {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.vime-favorites-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}
}