/**
 * Premium “₹0 to start” badge ABOVE Membership Plans (desktop) + flash sparkle.
 * Mobile: badge sits next to the menu text.
 * Visual enhancement only — does not alter menu behavior.
 */

.em-has-membership-badge {
	overflow: visible !important;
}

.em-has-membership-badge > a {
	position: relative !important;
	display: inline-flex !important;
	align-items: center;
	overflow: visible !important;
	/* Extra headroom so badge clears “Membership Plans” with a clear gap */
	padding-top: 28px !important;
	margin-top: -28px;
}

.em-membership-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	padding: 2px 8px;
	margin: 0 0 6px;
	border-radius: 999px;
	border: 1px solid #16a34a;
	background: #22c55e;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(22, 163, 74, 0.25);
	transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.em-membership-badge__text {
	display: inline-block;
	position: relative;
	z-index: 1;
}

/* Flash / sparkle lines (top-right of badge) */
.em-membership-badge__flash {
	position: absolute;
	top: -5px;
	right: -9px;
	width: 14px;
	height: 14px;
	pointer-events: none;
	z-index: 3;
}

.em-membership-badge__flash i {
	position: absolute;
	display: block;
	height: 2px;
	border-radius: 2px;
	background: #e91e8c;
	transform-origin: left center;
	opacity: 0.95;
}

.em-membership-badge__flash i:nth-child(1) {
	top: 2px;
	left: 4px;
	width: 9px;
	transform: rotate(-28deg);
}

.em-membership-badge__flash i:nth-child(2) {
	top: 5px;
	left: 6px;
	width: 7px;
	transform: rotate(-8deg);
}

.em-membership-badge__flash i:nth-child(3) {
	top: 8px;
	left: 5px;
	width: 8px;
	transform: rotate(18deg);
}

@keyframes em-membership-badge-flash {
	0%,
	100% {
		opacity: 0.55;
		transform: scale(0.92);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
}

.em-membership-badge__flash {
	animation: em-membership-badge-flash 1.8s ease-in-out infinite;
}

/* Hover / keyboard focus → brand red */
.em-has-membership-badge:hover > a .em-membership-badge,
.em-has-membership-badge:focus-within > a .em-membership-badge,
.em-has-membership-badge > a:hover .em-membership-badge,
.em-has-membership-badge > a:focus .em-membership-badge,
.em-has-membership-badge > a:focus-visible .em-membership-badge,
.em-membership-badge:hover,
.em-membership-badge:focus,
.em-membership-badge:focus-visible {
	background: #d32f2f;
	border-color: #d32f2f;
	color: #ffffff;
	box-shadow: 0 1px 3px rgba(211, 47, 47, 0.3);
}

.em-has-membership-badge:hover > a .em-membership-badge__flash i,
.em-has-membership-badge:focus-within > a .em-membership-badge__flash i,
body.em-membership-page .em-has-membership-badge > a .em-membership-badge__flash i,
.em-has-membership-badge.current-menu-item > a .em-membership-badge__flash i,
.em-has-membership-badge.current_page_item > a .em-membership-badge__flash i,
.em-has-membership-badge.em-membership-badge-active > a .em-membership-badge__flash i {
	background: #ff8a80;
}

/* Active page → permanently red */
.em-has-membership-badge.current-menu-item > a .em-membership-badge,
.em-has-membership-badge.current_page_item > a .em-membership-badge,
.em-has-membership-badge.current-menu-ancestor > a .em-membership-badge,
.em-has-membership-badge.em-membership-badge-active > a .em-membership-badge,
body.em-membership-page .em-has-membership-badge > a .em-membership-badge {
	background: #d32f2f;
	border-color: #d32f2f;
	color: #ffffff;
}

/* ---------- Tablet — still above, slightly tighter ---------- */
@media (max-width: 1024px) {
	.em-has-membership-badge > a {
		padding-top: 24px !important;
		margin-top: -24px;
	}

	.em-membership-badge {
		height: 16px;
		padding: 2px 7px;
		font-size: 9px;
		margin-bottom: 5px;
	}
}

/* ---------- Mobile — badge next to “Membership Plans” ---------- */
@media (max-width: 921px) {
	.em-has-membership-badge > a {
		display: inline-flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		padding-top: 0 !important;
		margin-top: 0;
	}

	.em-membership-badge {
		position: static;
		top: auto;
		right: auto;
		left: auto;
		margin: 0;
		height: 18px;
		padding: 2px 8px;
		font-size: 9px;
		flex-shrink: 0;
	}

	.em-membership-badge__flash {
		top: -4px;
		right: -7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.em-membership-badge {
		transition: none;
	}

	.em-membership-badge__flash {
		animation: none;
		opacity: 1;
	}
}