/* Zihaluv Label – badges */

.wcl-badge-wrap {
	position: relative;
	display: block;
	text-indent: 0;
	line-height: 0;
}

.wcl-badge-host {
	position: relative;
}

.wcl-badge {
	position: absolute;
	z-index: 9;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	max-width: 100%;
	color: var(--wcl-fg, #fff);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-indent: 0;
	white-space: nowrap;
	pointer-events: none;
}

.wcl-badge *,
.wcl-badge *::before,
.wcl-badge *::after {
	box-sizing: border-box;
}

.wcl-badge.wcl-geo-pending {
	display: none !important;
}

.wcl-badge__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.wcl-badge__text {
	display: block;
	color: inherit;
}

.wcl-badge img.wcl-badge__img {
	display: block;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
}

.wcl-flip-horizontal .wcl-badge__text {
	transform: scaleX(-1);
}

.wcl-flip-vertical .wcl-badge__text {
	transform: scaleY(-1);
}

.wcl-flip-both .wcl-badge__text {
	transform: scale(-1);
}

/* Text badge */
.wcl-badge--text .wcl-badge__inner {
	padding: 5px 10px;
	background: var(--wcl-bg, #e63946);
}

/* ---------- CSS shapes ---------- */

.wcl-badge--shaped .wcl-badge__inner {
	background: var(--wcl-bg, #e63946);
}

/* Corner ribbon */
.wcl-badge--s-corner {
	width: 86px;
	height: 86px;
	overflow: hidden;
}

.wcl-badge--s-corner .wcl-badge__inner {
	position: absolute;
	top: 36%;
	left: 36%;
	width: 150%;
	height: auto;
	min-height: 24px;
	padding: 5px 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	transform: translate(-50%, -50%) rotate(-45deg);
}

.wcl-badge--s-corner.wcl-o-tr .wcl-badge__inner {
	left: 64%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.wcl-badge--s-corner.wcl-o-bl .wcl-badge__inner {
	top: 64%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.wcl-badge--s-corner.wcl-o-br .wcl-badge__inner {
	top: 64%;
	left: 64%;
}

/* Corner triangle */
.wcl-badge--s-triangle {
	width: 78px;
	height: 78px;
}

.wcl-badge--s-triangle .wcl-badge__inner {
	position: relative;
	align-items: flex-start;
	justify-content: flex-start;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.wcl-badge--s-triangle .wcl-badge__text {
	position: absolute;
	top: 30%;
	left: 30%;
	width: 120%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.wcl-badge--s-triangle.wcl-o-tr .wcl-badge__inner {
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.wcl-badge--s-triangle.wcl-o-tr .wcl-badge__text {
	left: 70%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.wcl-badge--s-triangle.wcl-o-bl .wcl-badge__inner {
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.wcl-badge--s-triangle.wcl-o-bl .wcl-badge__text {
	top: 70%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.wcl-badge--s-triangle.wcl-o-br .wcl-badge__inner {
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.wcl-badge--s-triangle.wcl-o-br .wcl-badge__text {
	top: 70%;
	left: 70%;
}

.wcl-badge--s-triangle.wcl-flip-horizontal .wcl-badge__text,
.wcl-badge--s-triangle.wcl-flip-vertical .wcl-badge__text,
.wcl-badge--s-triangle.wcl-flip-both .wcl-badge__text {
	transform: translate(-50%, -50%) rotate(135deg);
}

/* Flag (swallow tail) */
.wcl-badge--s-flag .wcl-badge__inner {
	min-height: 28px;
	padding: 6px 22px 6px 12px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}

.wcl-badge--s-flag.wcl-o-tr .wcl-badge__inner,
.wcl-badge--s-flag.wcl-o-br .wcl-badge__inner {
	padding: 6px 12px 6px 22px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}

/* Arrow tag */
.wcl-badge--s-arrow .wcl-badge__inner {
	min-height: 28px;
	padding: 6px 24px 6px 12px;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.wcl-badge--s-arrow.wcl-o-tr .wcl-badge__inner,
.wcl-badge--s-arrow.wcl-o-br .wcl-badge__inner {
	padding: 6px 12px 6px 24px;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}

/* Slanted */
.wcl-badge--s-slant .wcl-badge__inner {
	min-height: 28px;
	padding: 6px 20px;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

/* Pill */
.wcl-badge--s-pill .wcl-badge__inner {
	min-height: 26px;
	padding: 5px 14px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Circle */
.wcl-badge--s-circle {
	width: 58px;
	height: 58px;
	white-space: normal;
}

.wcl-badge--s-circle .wcl-badge__inner {
	padding: 4px;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Stamp */
.wcl-badge--s-stamp {
	width: 64px;
	height: 64px;
	white-space: normal;
}

.wcl-badge--s-stamp .wcl-badge__inner {
	position: relative;
	padding: 8px;
	border-radius: 50%;
}

.wcl-badge--s-stamp .wcl-badge__inner::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px dashed currentColor;
	border-radius: 50%;
	opacity: 0.85;
}

/* Starburst */
.wcl-badge--s-burst {
	width: 68px;
	height: 68px;
	white-space: normal;
}

.wcl-badge--s-burst .wcl-badge__inner {
	padding: 12px;
	clip-path: polygon(50% 0, 59.8% 13.6%, 75% 6.7%, 76.7% 23.3%, 93.3% 25%, 86.4% 40.2%, 100% 50%, 86.4% 59.8%, 93.3% 75%, 76.7% 76.7%, 75% 93.3%, 59.8% 86.4%, 50% 100%, 40.2% 86.4%, 25% 93.3%, 23.3% 76.7%, 6.7% 75%, 13.6% 59.8%, 0 50%, 13.6% 40.2%, 6.7% 25%, 23.3% 23.3%, 25% 6.7%, 40.2% 13.6%);
}

/* Bookmark */
.wcl-badge--s-bookmark {
	width: 46px;
	min-height: 62px;
	white-space: normal;
}

.wcl-badge--s-bookmark .wcl-badge__inner {
	min-height: 62px;
	padding: 6px 4px 18px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12px), 0 100%);
}
