/**
 * Advanced Product Labels Pro — frontend styles.
 * Logical properties everywhere so RTL (Hebrew/Arabic) mirrors automatically.
 */

/* ---------------------------------------------------------------------------
 * 1. Wrappers & positioning
 * ------------------------------------------------------------------------ */

/*
 * Safe mode: the plugin prints .apl-anchor as a sibling and labels.js moves it
 * into whatever element the theme uses as the image container (.apl-media-host).
 * No theme markup is ever rewritten, so theme lazy-loading keeps working.
 */
.apl-media-host {
	position: relative;
}

.apl-anchor {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.apl-anchor > * {
	pointer-events: none;
}

.apl-anchor .apl-label {
	pointer-events: auto;
}

/*
 * Fallback while JS has not relocated the anchor yet (or is disabled): anchor to
 * the product card itself so top-positioned labels still land correctly.
 */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.woocommerce div.product,
.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
}

/* Legacy "filter" mode wrapper. Deliberately sets no size on the theme's image. */
.apl-media {
	position: relative;
	display: block;
	overflow: visible;
}

.apl-labels {
	--apl-gap: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--apl-gap);
	align-items: flex-start;
	line-height: 1;
}

.apl-labels--overlay {
	position: absolute;
	z-index: var(--apl-z, 20);
	max-inline-size: 100%;
	pointer-events: none;
}

.apl-labels--overlay > * {
	pointer-events: auto;
}

.apl-labels--inline {
	position: relative;
	margin-block: 4px;
}

.apl-labels--inline.apl-pos-in-title {
	display: inline-flex;
	margin-block: 0;
	vertical-align: middle;
}

/* 9-point grid — logical, so left/right flip in RTL. */
.apl-pos-top-left    { inset-block-start: 0; inset-inline-start: 0; }
.apl-pos-top-center  { inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); justify-content: center; }
.apl-pos-top-right   { inset-block-start: 0; inset-inline-end: 0; justify-content: flex-end; }
.apl-pos-middle-left { inset-block-start: 50%; inset-inline-start: 0; transform: translateY(-50%); }
.apl-pos-middle-center { inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); justify-content: center; }
.apl-pos-middle-right { inset-block-start: 50%; inset-inline-end: 0; transform: translateY(-50%); justify-content: flex-end; }
.apl-pos-bottom-left { inset-block-end: 0; inset-inline-start: 0; }
.apl-pos-bottom-center { inset-block-end: 0; inset-inline-start: 50%; transform: translateX(-50%); justify-content: center; }
.apl-pos-bottom-right { inset-block-end: 0; inset-inline-end: 0; justify-content: flex-end; }

[dir="rtl"] .apl-pos-top-center,
[dir="rtl"] .apl-pos-bottom-center { transform: translateX(50%); }
[dir="rtl"] .apl-pos-middle-center { transform: translate(50%, -50%); }

/* Full-width banner positions ignore the grid. */
.apl-labels--overlay:has(> .apl-tpl-banner-top),
.apl-labels--overlay:has(> .apl-tpl-banner-bottom) {
	inline-size: 100%;
	inset-inline: 0;
	transform: none;
}

/* ---------------------------------------------------------------------------
 * 2. Base label
 * ------------------------------------------------------------------------ */

.apl-label {
	--apl-bg: #e11d48;
	--apl-color: #ffffff;
	--apl-font-size: 13px;
	--apl-line-height: 1.2;
	--apl-padding: 6px 12px;
	--apl-radius: 4px;
	--apl-font-weight: 600;
	--apl-opacity: 1;
	--apl-scale: 1;
	--apl-rotate: 0deg;
	--apl-tpl-rotate: 0deg;
	--apl-offset-x: 0px;
	--apl-offset-y: 0px;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-inline-size: 100%;
	inline-size: var(--apl-width, auto);
	block-size: var(--apl-height, auto);
	margin: var(--apl-margin, 0);
	padding: var(--apl-padding);
	border: var(--apl-border, 0 solid transparent);
	border-radius: var(--apl-radius);
	background-color: var(--apl-bg);
	background-image: var(--apl-bg-image, none);
	color: var(--apl-color);
	font-family: var(--apl-font-family, inherit);
	font-size: var(--apl-font-size);
	font-weight: var(--apl-font-weight);
	line-height: var(--apl-line-height);
	letter-spacing: var(--apl-letter-spacing, normal);
	text-transform: var(--apl-text-transform, none);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	opacity: var(--apl-opacity);
	box-shadow: var(--apl-shadow, none);
	translate: var(--apl-offset-x) var(--apl-offset-y);
	rotate: calc(var(--apl-tpl-rotate) + var(--apl-rotate));
	scale: var(--apl-scale);
	transform-origin: center center;
	transition: opacity .2s ease;
}

.apl-label:hover { color: var(--apl-color); }

/*
 * WCAG 2.2 — 2.4.7 Focus Visible.
 * Labels can be links, and labels.js makes tooltip labels keyboard focusable,
 * so they need an indicator that survives any background colour. The white ring
 * around the dark outline keeps it visible on dark labels and dark photos alike.
 */
.apl-label:focus-visible {
	outline: 3px solid #0b0b0b;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #fff;
}

@supports not selector(:focus-visible) {
	.apl-label:focus {
		outline: 3px solid #0b0b0b;
		outline-offset: 2px;
		box-shadow: 0 0 0 6px #fff;
	}
}

.apl-label__inner { display: inline-block; }

.apl-label__img,
.apl-label .apl-label__img {
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
}

.apl-type-image {
	padding: 0;
	background: none;
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * 3. CSS templates (30)
 * ------------------------------------------------------------------------ */

.apl-tpl-badge-square   { border-radius: 0; }
.apl-tpl-badge-rounded  { border-radius: 6px; }
.apl-tpl-badge-pill     { border-radius: 999px; }

.apl-tpl-badge-circle {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	min-inline-size: calc(var(--apl-font-size) * 3.4);
	padding: 0;
}

.apl-tpl-badge-outline {
	background-color: transparent;
	background-image: none;
	color: var(--apl-bg);
	border: 2px solid var(--apl-bg);
}

/* Text is darkened against the tinted background: var(--apl-bg) on a 16% tint of itself
   lands around 3.6:1 and fails WCAG 1.4.3 AA for most brand colours. */
.apl-tpl-badge-soft {
	background-color: color-mix(in srgb, var(--apl-bg) 16%, #fff);
	color: color-mix(in srgb, var(--apl-bg) 75%, #000);
	border-radius: 6px;
}

.apl-tpl-ribbon-corner-left,
.apl-tpl-ribbon-corner-right {
	border-radius: 0;
	padding-inline: 14px;
}

.apl-tpl-ribbon-corner-left::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	border-block-start: 6px solid color-mix(in srgb, var(--apl-bg) 70%, #000);
	border-inline-end: 6px solid transparent;
}

.apl-tpl-ribbon-corner-right::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline-end: 0;
	border-block-start: 6px solid color-mix(in srgb, var(--apl-bg) 70%, #000);
	border-inline-start: 6px solid transparent;
}

.apl-tpl-ribbon-diagonal-left {
	--apl-tpl-rotate: -45deg;
	min-inline-size: 150px;
	border-radius: 0;
	translate: calc(-30% + var(--apl-offset-x)) calc(60% + var(--apl-offset-y));
}

.apl-tpl-ribbon-diagonal-right {
	--apl-tpl-rotate: 45deg;
	min-inline-size: 150px;
	border-radius: 0;
	translate: calc(30% + var(--apl-offset-x)) calc(60% + var(--apl-offset-y));
}

.apl-tpl-ribbon-flag-left {
	border-radius: 0;
	padding-inline-end: 20px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}

.apl-tpl-ribbon-flag-right {
	border-radius: 0;
	padding-inline-start: 20px;
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}

.apl-tpl-banner-top,
.apl-tpl-banner-bottom {
	inline-size: 100%;
	border-radius: 0;
	justify-content: center;
}

.apl-tpl-tag-left {
	border-radius: 0 4px 4px 0;
	padding-inline-start: 18px;
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}

.apl-tpl-tag-right {
	border-radius: 4px 0 0 4px;
	padding-inline-end: 18px;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

.apl-tpl-arrow-right {
	border-radius: 0;
	padding-inline-end: 22px;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.apl-tpl-arrow-left {
	border-radius: 0;
	padding-inline-start: 22px;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}

.apl-tpl-bookmark {
	border-radius: 3px 3px 0 0;
	padding-block-end: 16px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
}

.apl-tpl-cut-corner {
	border-radius: 0;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.apl-tpl-chevron {
	border-radius: 0;
	padding-inline: 20px;
	clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 12px 100%, 0 50%);
}

.apl-tpl-dashed {
	background-color: transparent;
	background-image: none;
	color: var(--apl-bg);
	border: 2px dashed var(--apl-bg);
	border-radius: 6px;
}

.apl-tpl-dotted {
	background-color: transparent;
	background-image: none;
	color: var(--apl-bg);
	border: 2px dotted var(--apl-bg);
	border-radius: 6px;
}

.apl-tpl-shadow-box {
	border-radius: 4px;
	box-shadow: var(--apl-shadow, 0 6px 16px rgba(0, 0, 0, .28));
}

.apl-tpl-gradient-fade {
	background-image: linear-gradient(90deg, var(--apl-bg) 0%, color-mix(in srgb, var(--apl-bg) 20%, transparent) 100%);
	border-radius: 4px;
}

.apl-tpl-neon-glow {
	border-radius: 6px;
	box-shadow: 0 0 6px var(--apl-bg), 0 0 18px color-mix(in srgb, var(--apl-bg) 60%, transparent);
	text-shadow: 0 0 6px color-mix(in srgb, var(--apl-color) 80%, transparent);
}

.apl-tpl-sticker {
	border-radius: 999px;
	border: 3px solid #fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}

.apl-tpl-folded-corner {
	border-radius: 0 0 0 4px;
	overflow: hidden;
}

.apl-tpl-folded-corner::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: 12px;
	block-size: 12px;
	background: linear-gradient(225deg, rgba(0, 0, 0, .35) 0 50%, transparent 50%);
}

.apl-tpl-price-tag {
	border-radius: 4px 999px 999px 4px;
	padding-inline-end: 22px;
}

.apl-tpl-price-tag::after {
	content: "";
	position: absolute;
	inset-inline-end: 8px;
	inset-block-start: 50%;
	inline-size: 6px;
	block-size: 6px;
	margin-block-start: -3px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--apl-color) 90%, transparent);
}

.apl-tpl-minimal-line {
	background-color: transparent;
	background-image: none;
	color: var(--apl-bg);
	border-radius: 0;
	padding-inline: 0;
	padding-block-end: 4px;
	border-block-end: 2px solid var(--apl-bg);
}

/* ---------------------------------------------------------------------------
 * 4. Advanced templates (12)
 * ------------------------------------------------------------------------ */

.apl-tpl-adv-hexagon {
	border-radius: 0;
	padding-inline: 22px;
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.apl-tpl-adv-octagon {
	border-radius: 0;
	padding-inline: 18px;
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.apl-tpl-adv-starburst-8 {
	border-radius: 0;
	aspect-ratio: 1 / 1;
	min-inline-size: calc(var(--apl-font-size) * 4.6);
	padding: 0;
	clip-path: polygon(50% 0, 61% 22%, 85% 15%, 78% 39%, 100% 50%, 78% 61%, 85% 85%, 61% 78%, 50% 100%, 39% 78%, 15% 85%, 22% 61%, 0 50%, 22% 39%, 15% 15%, 39% 22%);
}

.apl-tpl-adv-starburst-12 {
	border-radius: 0;
	aspect-ratio: 1 / 1;
	min-inline-size: calc(var(--apl-font-size) * 4.8);
	padding: 0;
	clip-path: polygon(50% 0, 57% 18%, 75% 7%, 74% 27%, 93% 25%, 84% 42%, 100% 50%, 84% 58%, 93% 75%, 74% 73%, 75% 93%, 57% 82%, 50% 100%, 43% 82%, 25% 93%, 26% 73%, 7% 75%, 16% 58%, 0 50%, 16% 42%, 7% 25%, 26% 27%, 25% 7%, 43% 18%);
}

.apl-tpl-adv-seal {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	min-inline-size: calc(var(--apl-font-size) * 4.2);
	padding: 0;
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--apl-color) 85%, transparent), 0 2px 8px rgba(0, 0, 0, .2);
}

.apl-tpl-adv-stripes {
	border-radius: 4px;
	background-image: repeating-linear-gradient(
		45deg,
		color-mix(in srgb, var(--apl-bg) 100%, transparent) 0 10px,
		color-mix(in srgb, var(--apl-bg) 72%, #000) 10px 20px
	);
}

.apl-tpl-adv-glass {
	border-radius: 10px;
	background-color: color-mix(in srgb, var(--apl-bg) 35%, transparent);
	border: 1px solid color-mix(in srgb, #fff 45%, transparent);
	backdrop-filter: blur(8px) saturate(140%);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}

.apl-tpl-adv-extrude {
	border-radius: 4px;
	box-shadow:
		1px 1px 0 color-mix(in srgb, var(--apl-bg) 78%, #000),
		2px 2px 0 color-mix(in srgb, var(--apl-bg) 66%, #000),
		3px 3px 0 color-mix(in srgb, var(--apl-bg) 54%, #000),
		4px 4px 0 color-mix(in srgb, var(--apl-bg) 42%, #000);
}

.apl-tpl-adv-corner-fill {
	border-radius: 0;
	inline-size: var(--apl-width, 90px);
	block-size: var(--apl-height, 90px);
	padding: 0;
	align-items: flex-start;
	justify-content: flex-start;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.apl-tpl-adv-corner-fill .apl-label__inner {
	rotate: -45deg;
	margin: 18px 0 0 4px;
}

[dir="rtl"] .apl-tpl-adv-corner-fill { clip-path: polygon(0 0, 100% 0, 100% 100%); }
[dir="rtl"] .apl-tpl-adv-corner-fill .apl-label__inner { rotate: 45deg; margin: 18px 4px 0 0; }

.apl-tpl-adv-wave {
	border-radius: 6px 6px 0 0;
	padding-block-end: 14px;
	mask-image: radial-gradient(circle at 10px 100%, transparent 8px, #000 8px);
	mask-size: 20px 100%;
	mask-repeat: repeat-x;
	-webkit-mask-image: radial-gradient(circle at 10px 100%, transparent 8px, #000 8px);
	-webkit-mask-size: 20px 100%;
	-webkit-mask-repeat: repeat-x;
}

.apl-tpl-adv-double-border {
	border-radius: 4px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--apl-bg);
}

.apl-tpl-adv-split {
	border-radius: 4px;
	background-image: linear-gradient(90deg, var(--apl-bg) 0 50%, var(--apl-bg2, color-mix(in srgb, var(--apl-bg) 60%, #000)) 50% 100%);
}

/* ---------------------------------------------------------------------------
 * 5. Image templates (14)
 * ------------------------------------------------------------------------ */

[class*="apl-tpl-img-"] {
	background-color: transparent;
	background-image: var(--apl-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-inline-size: calc(var(--apl-font-size) * 4.6);
	min-block-size: calc(var(--apl-font-size) * 3.4);
	padding: calc(var(--apl-font-size) * .6) calc(var(--apl-font-size) * .9);
}

.apl-tpl-img-burst-red,
.apl-tpl-img-burst-yellow,
.apl-tpl-img-circle-sale,
.apl-tpl-img-percent {
	aspect-ratio: 1 / 1;
	min-block-size: calc(var(--apl-font-size) * 4.6);
}

.apl-has-image.apl-type-image { background-image: none; }

/* ---------------------------------------------------------------------------
 * 6. Tooltip
 * ------------------------------------------------------------------------ */

.apl-has-tooltip { cursor: help; }

.apl-tooltip {
	position: absolute;
	inset-block-end: calc(100% + 8px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 6px;
	inline-size: max-content;
	max-inline-size: 220px;
	padding: 8px 10px;
	border-radius: 8px;
	background: #0f172a;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	white-space: normal;
	text-align: start;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, visibility .15s ease;
	rotate: calc(-1 * (var(--apl-tpl-rotate) + var(--apl-rotate)));
}

[dir="rtl"] .apl-tooltip { transform: translateX(50%); }

.apl-tooltip::after {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 50%;
	margin-inline-start: -5px;
	border: 5px solid transparent;
	border-block-start-color: #0f172a;
}

/* WCAG 2.2 — 1.4.13 "Hoverable": an invisible bridge spans the 8px gap so the pointer
   can travel from the label onto the tooltip without the tooltip disappearing. */
.apl-tooltip::before {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	block-size: 10px;
}

.apl-has-tooltip:hover .apl-tooltip,
.apl-has-tooltip:focus-visible .apl-tooltip,
.apl-has-tooltip:focus-within .apl-tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* WCAG 2.2 — 1.4.13 "Dismissible": labels.js sets this class on Escape. Specificity is
   deliberately higher than the rules above so the tooltip stays hidden while the pointer
   or focus remains on the trigger. */
.apl-has-tooltip.apl-tooltip-dismissed:hover .apl-tooltip,
.apl-has-tooltip.apl-tooltip-dismissed:focus-visible .apl-tooltip,
.apl-has-tooltip.apl-tooltip-dismissed:focus-within .apl-tooltip {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.apl-tooltip__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * 7. Timer
 * ------------------------------------------------------------------------ */

.apl-timer {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	margin-inline-start: .35em;
}

.apl-type-timer.apl-expired { display: none; }

/* ---------------------------------------------------------------------------
 * 8. Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 782px) {
	.apl-label {
		font-size: calc(var(--apl-font-size) * .9);
		padding: calc(var(--apl-font-size) * .35) calc(var(--apl-font-size) * .7);
	}
}

@media (prefers-reduced-motion: reduce) {
	.apl-label,
	.apl-tooltip { transition: none; }
}