/**
 * Turbo Save Toggle — زر حفظ القطعة (أيقونة قلب).
 *
 * ملف منفصل عن turbo-account-portal.css لأن هذا الزر يظهر على صفحات
 * المنتجات (متجر/تصنيف/منتج مفرد) بينما بقية ورقة الأنماط الخاصة بالحساب
 * والفواتير لا لزوم لها هناك. تحميله مستقل يوفّر ~30KB على كل صفحة متجر.
 *
 * النمط: sibling لا يمس price/button/counter في بطاقة المنتج.
 */

/* الأساس — زر مضاف (صفحة المنتج المفردة) */
.turbo-save-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-block-size: 36px;
	padding-inline: 0.7rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--mist);
	font-family: var(--wp--preset--font-family--cairo);
	font-size: 0.72rem;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

/* بطاقة المتجر: أيقونة فقط مثبّتة في الزاوية العلوية اليسرى.
   RTL: الزاوية اليسرى الفيزيائية = inline-end.
   specificity (0,2,0) أعلى من الأساس (0,1,0) فيتغلّب دون !important. */
.turbo-product-card .turbo-save-toggle,
.turbo-catalog-grid .turbo-product-card .turbo-save-toggle {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 3;
	inline-size: 36px;
	block-size: 36px;
	min-block-size: 0;
	gap: 0;
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 74%, transparent);
	backdrop-filter: blur(6px);
}

/* الموبايل: نفس الموضع، حجم لمسي أكبر قليلًا */
@media (max-width: 782px) {
	.turbo-product-card .turbo-save-toggle,
	.turbo-catalog-grid .turbo-product-card .turbo-save-toggle {
		inset-block-start: 8px;
		inset-inline-end: 8px;
		inline-size: 34px;
		block-size: 34px;
	}
}

.turbo-save-toggle:hover {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	background: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
}

.turbo-save-toggle:focus-visible {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* محفوظ = قلب ممتلئ بالأحمر */
.turbo-save-toggle.is-saved {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.turbo-save-toggle__icon {
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linejoin: round;
	transition: fill 0.18s ease;
}

.turbo-save-toggle.is-saved .turbo-save-toggle__icon {
	fill: currentColor;
}

.turbo-save-toggle[disabled] {
	opacity: 0.55;
	cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
	.turbo-save-toggle,
	.turbo-save-toggle__icon {
		transition: none;
	}
}