/* ---------- Outer alignment wrap ---------- */
.esa-sale-arrow-wrap {
	display: flex;
	width: 100%;
	justify-content: center; /* overridden by horizontal_align control */
}

/* Normal flow (inline): just a flex row, takes natural height */
.esa-position-inline {
	position: relative;
}

/* Overlay mode: covers the whole positioned parent (section/column) */
.esa-position-absolute {
	position: absolute;
	inset: 0;
	align-items: center; /* overridden by vertical_align control */
	pointer-events: none; /* let clicks pass through empty overlay area */
}

.esa-position-absolute .esa-sale-arrow {
	pointer-events: auto; /* the arrow itself stays clickable */
}

/* ---------- Arrow core ---------- */
.esa-sale-arrow {
	--esa-arrow-color: #E30613;
	--esa-glow-color: rgba(227,6,19,0.6);
	--esa-pulse-duration: 1.4s;
	--esa-pulse-scale: 8;
	--esa-rotation: -45deg;

	position: relative;
	display: inline-block;
	width: 320px;
	max-width: 100%;
	line-height: 0;
}

.esa-sale-arrow__link {
	display: block;
	text-decoration: none;
}

/* Rotation + flip layer: static transform, independent from the pulse animation */
.esa-sale-arrow__rotate {
	transform: rotate(var(--esa-rotation, 0deg));
	transform-origin: center center;
}

.esa-flipped .esa-sale-arrow__rotate {
	transform: rotate(var(--esa-rotation, 0deg)) scaleX(-1);
}

/* Pulse-scale layer: animation transform lives here, separate element from rotation */
.esa-sale-arrow__shape {
	position: relative;
	width: 100%;
	transform-origin: center center;
	will-change: transform;
}

.esa-sale-arrow__svg {
	display: block;
	width: 100%;
	height: auto;
	fill: var(--esa-arrow-color);
	filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
	transition: fill 0.3s ease;
}

/* content sits on top of the svg shape, rotates together with it */
.esa-sale-arrow__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6% 12%;
	line-height: 1.15;
	pointer-events: none;
}

.esa-sale-arrow__main {
	color: #fff;
	font-weight: 900;
	font-size: 48px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0;
}

.esa-sale-arrow__discount {
	margin-top: 6px;
	display: inline-block;
	background: #fff;
	color: var(--esa-arrow-color);
	font-weight: 700;
	font-size: 16px;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.esa-sale-arrow__description {
	margin-top: 6px;
	color: #fff;
	font-size: 13px;
	line-height: 1.3;
	opacity: 0.95;
}

/* ---------- Pulse animation ---------- */
.esa-pulse .esa-sale-arrow__shape {
	animation: esa-pulse-scale var(--esa-pulse-duration) ease-in-out infinite;
}

@keyframes esa-pulse-scale {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(calc(1 + (var(--esa-pulse-scale) / 100)));
	}
	100% {
		transform: scale(1);
	}
}

.esa-glow.esa-pulse .esa-sale-arrow__svg {
	animation: esa-pulse-glow var(--esa-pulse-duration) ease-in-out infinite;
}

@keyframes esa-pulse-glow {
	0% {
		filter: drop-shadow(0 0 0 var(--esa-glow-color)) drop-shadow(0 6px 14px rgba(0,0,0,0.25));
	}
	50% {
		filter: drop-shadow(0 0 22px var(--esa-glow-color)) drop-shadow(0 6px 14px rgba(0,0,0,0.25));
	}
	100% {
		filter: drop-shadow(0 0 0 var(--esa-glow-color)) drop-shadow(0 6px 14px rgba(0,0,0,0.25));
	}
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.esa-pulse .esa-sale-arrow__shape,
	.esa-glow.esa-pulse .esa-sale-arrow__svg {
		animation: none !important;
	}
}