/**
 * Featured listing package corner ribbon (Featured? packages in MyListing).
 *
 * Uses the border triangle (Club/MyListing-inspired) plus CSS variables from
 * {@see Featured_Listing_Package_Badges_Module::build_css_variables_inline()}.
 *
 * @package MyListingPro
 */

body.mlpro-featured-package-badges .pricing-item {
	position: relative;
}

body.mlpro-featured-package-badges .featured-plan-badge.mlpro-flb-badge {
	position: absolute;
	box-sizing: border-box;
	border: 0;
	border-top: 0 solid transparent;
	border-bottom: var(--mlpro-flb-ribbon-bottom, 110px) solid transparent;
	border-right: var(--mlpro-flb-ribbon-right, 110px) solid var(--mlpro-flb-ribbon-fill, var(--accent));
	border-radius: var(--mlpro-flb-corner-radius, 0 20px 0 0);
	left: auto;
	right: var(--mlpro-flb-offset-right, 10px);
	top: 0;
	z-index: 2;
	overflow: visible;
}

body.mlpro-featured-package-badges .featured-plan-badge.mlpro-flb-badge .icon-flash {
	display: none;
}

body.mlpro-featured-package-badges .featured-plan-badge.mlpro-flb-badge .featured-plan-badge__label {
	box-sizing: border-box;
	position: absolute;
	left: auto; /* Override theme `.featured-plan-badge span`; avoid stacking with `right` */
	bottom: auto;
	color: var(--mlpro-flb-label-color, #fff);
	top: var(--mlpro-flb-label-top, 15px);
	right: var(--mlpro-flb-label-right, -102px);
	width: calc(var(--mlpro-flb-ribbon-right, 110px) * 50 / 110);
	white-space: pre-line;
	text-align: center;
	/*
	 * Text column tracks ribbon size (~50px at 110px ribbon). Typography cap scales with ribbon
	 * (~30px at default 110px ribbon) but never exceeds the admin “maximum”; floor keeps tiny ribbons usable.
	 */
	font-size: clamp(
		8px,
		min(
			var(--mlpro-flb-label-font-size, 0.813rem),
			calc(var(--mlpro-flb-ribbon-right, 110px) * 30 / 110)
		),
		var(--mlpro-flb-label-font-size, 0.813rem)
	);
	font-weight: var(--mlpro-flb-label-font-weight, 500);
	line-height: var(--mlpro-flb-label-line-height, 1.2);
	pointer-events: none;
	overflow-wrap: break-word;
	text-wrap: pretty;
	hyphens: auto;
	background: transparent;
}
