/*
 * Product badges ("תגי מבצע"): the stack on the product card and the ten
 * built-in designs. Also loaded in the admin badge screens for previews.
 */
.badges {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	z-index: 2;
	display: grid;
	gap: 8px;
	justify-items: start;
	pointer-events: none;
}

.badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
	isolation: isolate;
	overflow: hidden;
	background: #171717;
	color: #fff;
}

.badge .icon,
.badge .badge-icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.badge-text {
	position: relative;
	z-index: 1;
}

/* 1. Classic black (also the magazine category chips) */
.badge--noir,
.badge--sale {
	background: #171717;
	color: #fff;
}

/* 2. White with a fine black outline */
.badge--ivory {
	background: #fff;
	color: #171717;
	border: 1px solid #171717;
}

/* 3. Gold */
.badge--gold,
.badge--gold-shimmer {
	background: linear-gradient(135deg, #ecd8a8 0%, #d6b46c 48%, #f1dfb2 100%);
	color: #2b2210;
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 4px 14px rgba(196, 160, 84, 0.28);
}

/* 4. Gold with a light sweeping across it */
.badge--gold-shimmer {
	box-shadow: 0 5px 16px rgba(196, 160, 84, 0.38);
}

/* 5. Rose gold */
.badge--rose {
	background: linear-gradient(135deg, #f7d9cd 0%, #e3a793 52%, #f9dfd3 100%);
	color: #3a1f18;
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 4px 14px rgba(214, 150, 130, 0.28);
}

/* 6. Platinum with a light sweep */
.badge--platinum {
	background: linear-gradient(135deg, #f8f8fa 0%, #d0d4db 52%, #f2f3f5 100%);
	color: #1d222b;
	border: 1px solid rgba(255, 255, 255, 0.75);
	box-shadow: 0 4px 14px rgba(120, 128, 140, 0.22);
}

.badge--gold-shimmer::after,
.badge--platinum::after {
	content: "";
	position: absolute;
	inset: -20% -60%;
	z-index: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%);
	transform: translateX(-100%);
	animation: cj-badge-sweep 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 7. Diamond: white pill, prismatic edge, twinkling sparks */
.badge--diamond {
	overflow: visible;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, #cfdcf5 0%, #f3e4ff 30%, #d7f0ff 60%, #ffe9c8 100%) border-box;
	border: 1px solid transparent;
	color: #171717;
	box-shadow: 0 4px 16px rgba(120, 140, 190, 0.22);
}

.badge--diamond::before,
.badge--diamond::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 10px;
	height: 10px;
	background: radial-gradient(circle, #fff 0 35%, #a9c1ff 75%, transparent 76%);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(120, 150, 220, 0.8));
	animation: cj-badge-twinkle 2.6s ease-in-out infinite;
}

.badge--diamond::before {
	inset-block-start: -5px;
	inset-inline-end: 9px;
}

.badge--diamond::after {
	inset-block-end: -4px;
	inset-inline-start: 11px;
	width: 7px;
	height: 7px;
	animation-delay: 1.3s;
}

/* 8. Peach: the brand highlight */
.badge--peach {
	background: #ffddbf;
	color: #171717;
}

/* 9. Sapphire with a slow glow */
.badge--sapphire {
	background: linear-gradient(135deg, #2c4c82 0%, #14243f 100%);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(20, 36, 63, 0.35);
	animation: cj-badge-glow 2.8s ease-in-out infinite;
}

/* 10. Frosted glass */
.badge--glass {
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(8px) saturate(1.3);
	backdrop-filter: blur(8px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, 0.8);
	color: #171717;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

@keyframes cj-badge-sweep {
	0% {
		transform: translateX(-100%);
	}

	45%,
	100% {
		transform: translateX(100%);
	}
}

@keyframes cj-badge-twinkle {
	0%,
	100% {
		transform: scale(0.35) rotate(0deg);
		opacity: 0;
	}

	50% {
		transform: scale(1) rotate(45deg);
		opacity: 1;
	}
}

@keyframes cj-badge-glow {
	0%,
	100% {
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(20, 36, 63, 0.35);
	}

	50% {
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 6px 26px rgba(62, 108, 190, 0.65);
	}
}

@media (max-width: 768px) {
	.badges {
		inset-block-start: 12px;
		inset-inline-start: 12px;
		gap: 6px;
	}

	.badge {
		padding: 6px 11px;
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.badge,
	.badge::before,
	.badge::after {
		animation: none;
	}
}

/* =========================================================================
   Premium designs: polished metal, glitter and sparks
   ========================================================================= */
.badge .badge-icon {
	width: 18px;
	height: 18px;
}

.badge:has(.badge-icon) {
	padding-inline-start: 10px;
}

.badge--premium {
	overflow: visible;
	padding: 9px 17px 9px 15px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.badge--premium:has(.badge-icon) {
	padding-inline-start: 11px;
}

.badge--premium .badge-icon {
	width: 20px;
	height: 20px;
	z-index: 3;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.badge--premium .badge-text {
	z-index: 3;
}

/* Layers: ::before = design-specific (gloss / prism), glitter dots, ::after = specular sweep, sparks */
.badge--premium::before,
.badge--premium::after,
.badge--premium .badge-glitter {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.badge--premium::before {
	z-index: 0;
}

.badge--premium .badge-glitter {
	z-index: 1;
	opacity: 0.85;
	background-image:
		radial-gradient(circle at 12% 30%, #fff 0 0.9px, transparent 1.8px),
		radial-gradient(circle at 48% 70%, rgba(255, 255, 255, 0.95) 0 0.8px, transparent 1.6px),
		radial-gradient(circle at 80% 25%, #fff 0 1px, transparent 2px),
		radial-gradient(circle at 30% 85%, rgba(255, 255, 255, 0.9) 0 0.7px, transparent 1.5px),
		radial-gradient(circle at 65% 45%, rgba(255, 255, 255, 0.9) 0 0.7px, transparent 1.5px),
		radial-gradient(circle at 92% 75%, #fff 0 0.9px, transparent 1.8px);
	background-size: 29px 23px, 37px 31px, 41px 29px, 23px 27px, 47px 37px, 31px 33px;
	animation: cj-glitter 1.6s ease-in-out infinite;
}

.badge--premium::after {
	z-index: 2;
	background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 60%);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	background-position: 0% 0;
	mix-blend-mode: screen;
	animation: cj-sheen 2.6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.badge-spark {
	position: absolute;
	z-index: 4;
	width: 13px;
	height: 13px;
	pointer-events: none;
	background: radial-gradient(circle, #fff 0 32%, rgba(255, 255, 255, 0.95) 46%, rgba(255, 255, 255, 0) 74%);
	clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
	filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(255, 232, 160, 0.95));
	opacity: 0;
	animation: cj-spark 2.4s ease-in-out infinite;
}

.badge-spark--1 {
	inset-block-start: -7px;
	inset-inline-end: 12%;
}

.badge-spark--2 {
	inset-block-end: -7px;
	inset-inline-start: 16%;
	width: 10px;
	height: 10px;
	animation-delay: 0.9s;
}

.badge-spark--3 {
	inset-block-start: 22%;
	inset-inline-start: -6px;
	width: 9px;
	height: 9px;
	animation-delay: 1.6s;
}

/* 11. 24K gold */
.badge--gold-24k {
	color: #3a2604;
	background: linear-gradient(180deg, #fff6c8 0%, #f6cf5c 18%, #d39a17 38%, #f9e28e 52%, #b9800e 72%, #f3cf65 100%);
	border: 1px solid #8a5d08;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(80, 50, 0, 0.45), 0 0 0 1px rgba(255, 240, 190, 0.5), 0 8px 22px rgba(205, 150, 25, 0.55), 0 0 18px rgba(255, 210, 90, 0.45);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 12. Rose gold */
.badge--rose-gold-lux {
	color: #4a2418;
	background: linear-gradient(180deg, #fff1ea 0%, #f6c4ae 18%, #d98668 38%, #ffd9c8 52%, #c27050 72%, #f2b89f 100%);
	border: 1px solid #a65a3c;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(90, 40, 20, 0.4), 0 0 0 1px rgba(255, 230, 220, 0.55), 0 8px 22px rgba(217, 134, 104, 0.5), 0 0 18px rgba(255, 190, 170, 0.45);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 13. Platinum */
.badge--platinum-lux {
	color: #1d2430;
	background: linear-gradient(180deg, #ffffff 0%, #e8ebf0 18%, #b6bdc8 38%, #f8f9fb 52%, #a3abb7 72%, #ebeef2 100%);
	border: 1px solid #7c8592;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(40, 50, 65, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.7), 0 8px 22px rgba(120, 130, 150, 0.5), 0 0 18px rgba(200, 210, 225, 0.6);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 14. Diamond: white with a prismatic sheen and extra sparks */
.badge--diamond-lux {
	color: #16213a;
	background: linear-gradient(180deg, #ffffff 0%, #eef3ff 55%, #dbe5f7 100%);
	border: 1px solid #b8c6e4;
	box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.8), 0 8px 24px rgba(120, 150, 210, 0.45), 0 0 20px rgba(190, 215, 255, 0.8);
	text-shadow: 0 1px 0 #fff;
}

.badge--diamond-lux::before {
	background-image: linear-gradient(115deg, rgba(255, 150, 175, 0.55) 0%, rgba(255, 225, 140, 0.55) 20%, rgba(160, 255, 215, 0.55) 40%, rgba(150, 205, 255, 0.55) 60%, rgba(220, 160, 255, 0.55) 80%, rgba(255, 150, 175, 0.55) 100%);
	background-size: 300% 100%;
	mix-blend-mode: multiply;
	animation: cj-prism 4s linear infinite;
}

.badge--diamond-lux .badge-spark {
	filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(150, 190, 255, 1));
}

/* 15. Black and gold foil */
.badge--black-gold {
	color: #f0c24c;
	background:
		linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%) padding-box,
		linear-gradient(180deg, #fff0b8 0%, #c8931a 50%, #f6d77a 100%) border-box;
	border: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 16px rgba(240, 194, 76, 0.4);
}

.badge--black-gold .badge-text {
	background: linear-gradient(180deg, #fff3c0 0%, #f0c24c 45%, #b7800f 60%, #ffe9a3 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.badge--black-gold .badge-glitter {
	opacity: 0.6;
}

/* 16. Ruby */
.badge--ruby {
	color: #fff;
	background: radial-gradient(120% 100% at 30% 10%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #ff7d8e 0%, #d61f3d 45%, #7a0a1f 100%);
	border: 1px solid rgba(255, 190, 200, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(60, 0, 10, 0.5), 0 8px 22px rgba(214, 31, 61, 0.55), 0 0 18px rgba(255, 90, 120, 0.5);
	text-shadow: 0 1px 1px rgba(60, 0, 10, 0.7);
}

/* 17. Emerald */
.badge--emerald {
	color: #fff;
	background: radial-gradient(120% 100% at 30% 10%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #7ff0b6 0%, #17a765 45%, #075c36 100%);
	border: 1px solid rgba(200, 255, 225, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 40, 20, 0.5), 0 8px 22px rgba(23, 167, 101, 0.5), 0 0 18px rgba(100, 240, 180, 0.5);
	text-shadow: 0 1px 1px rgba(0, 40, 20, 0.7);
}

/* 18. Sapphire */
.badge--sapphire-lux {
	color: #fff;
	background: radial-gradient(120% 100% at 30% 10%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #8fb8ff 0%, #2251c9 45%, #0b1f5c 100%);
	border: 1px solid rgba(200, 220, 255, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 10, 50, 0.5), 0 8px 22px rgba(34, 81, 201, 0.55), 0 0 18px rgba(120, 170, 255, 0.55);
	text-shadow: 0 1px 1px rgba(0, 10, 50, 0.7);
}

/* 19. Champagne glitter */
.badge--champagne-glitter {
	color: #4a3410;
	background: linear-gradient(180deg, #fff9e8 0%, #f4e2b4 50%, #e6cc8e 100%);
	border: 1px solid #c9a960;
	box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 246, 220, 0.7), 0 8px 22px rgba(220, 190, 120, 0.5), 0 0 18px rgba(255, 230, 170, 0.6);
	text-shadow: 0 1px 0 #fff;
}

.badge--champagne-glitter .badge-glitter {
	opacity: 1;
	background-image:
		radial-gradient(circle at 12% 30%, #fff 0 1px, transparent 2px),
		radial-gradient(circle at 48% 70%, #e2b957 0 0.9px, transparent 1.8px),
		radial-gradient(circle at 80% 25%, #fff 0 1.1px, transparent 2.2px),
		radial-gradient(circle at 30% 85%, #d9a93a 0 0.8px, transparent 1.7px),
		radial-gradient(circle at 65% 45%, #fff 0 0.9px, transparent 1.8px),
		radial-gradient(circle at 92% 75%, #e2b957 0 1px, transparent 2px),
		radial-gradient(circle at 20% 55%, #fff 0 0.7px, transparent 1.5px);
	background-size: 23px 19px, 29px 25px, 31px 23px, 19px 21px, 37px 29px, 25px 27px, 17px 23px;
}

/* 20. Holographic foil */
.badge--holographic {
	color: #241d3a;
	background: linear-gradient(115deg, #ffb3c7 0%, #ffe08a 20%, #b8ffd9 40%, #a6d8ff 60%, #d9b8ff 80%, #ffb3c7 100%);
	background-size: 300% 100%;
	border: 1px solid rgba(255, 255, 255, 0.85);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px rgba(160, 140, 220, 0.45), 0 0 18px rgba(255, 200, 230, 0.6);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	animation: cj-prism 3s linear infinite;
}

.badge--holographic::before {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 55%);
}

@keyframes cj-sheen {
	0% {
		background-position: 0% 0;
	}

	55%,
	100% {
		background-position: 100% 0;
	}
}

@keyframes cj-glitter {
	0%,
	100% {
		opacity: 0.45;
		background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	}

	50% {
		opacity: 1;
		background-position: 3px 2px, -2px 3px, 2px -3px, -3px -1px, 1px 3px, -2px -2px, 2px 1px;
	}
}

@keyframes cj-spark {
	0%,
	100% {
		transform: scale(0) rotate(0deg);
		opacity: 0;
	}

	40% {
		transform: scale(1.15) rotate(30deg);
		opacity: 1;
	}

	60% {
		transform: scale(0.9) rotate(45deg);
		opacity: 0.9;
	}
}

@keyframes cj-prism {
	from {
		background-position: 0% 0;
	}

	to {
		background-position: 300% 0;
	}
}

@media (max-width: 768px) {
	.badge--premium {
		padding: 7px 13px 7px 12px;
		font-size: 12px;
	}

	.badge--premium .badge-icon {
		width: 17px;
		height: 17px;
	}

	.badge .badge-icon {
		width: 16px;
		height: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.badge--premium,
	.badge--premium::before,
	.badge--premium::after,
	.badge-glitter,
	.badge-spark {
		animation: none;
	}

	.badge-spark {
		opacity: 0.8;
		transform: scale(0.8) rotate(45deg);
	}
}