/**
 * Free-shipping product badge — minimal, engineered product-page chip.
 * Prefixed vss- to avoid colliding with checkout frontend.css.
 */

.vss-free-badge-slot {
	display: block;
	width: 100%;
	max-width: 100%;
	clear: both;
	margin: 12px 0 10px;
	box-sizing: border-box;
	direction: rtl !important;
	text-align: right !important;
	/* Fallback colors — inline style on the slot overrides these. */
	--vss-badge-title-color: #1b7a3d;
	--vss-badge-subtitle-color: #64748b;
	--vss-badge-icon-color: #2e7d32;
	--vss-badge-border-color: #d8ebe0;
	--vss-badge-bg-color: #f6faf7;
	--vss-badge-info-color: #2e7d32;
	--vss-badge-surface: var(--vss-badge-bg-color, #f6faf7);
	--vss-badge-tint: color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 9%, var(--vss-badge-bg-color, #fff));
	--vss-badge-well: color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 12%, transparent);
	--vss-badge-shadow: color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 10%, transparent);
}

.vss-free-badge-slot--after {
	margin-top: 12px;
	margin-bottom: 8px;
}

form.cart .vss-free-badge-slot--before {
	flex: 0 0 100%;
	max-width: 100%;
	order: -10;
}

.vss-free-badge {
	/* Do NOT redefine color CSS variables here — they inherit from the slot inline style. */
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--vss-badge-gap, 10px);
	padding: var(--vss-badge-pad-y, 10px) var(--vss-badge-pad-x, 12px);
	padding-inline-end: calc(var(--vss-badge-pad-x, 12px) + 4px);
	border: 1px solid var(--vss-badge-border-color, #d8ebe0);
	border-radius: var(--vss-badge-radius, 12px);
	background:
		linear-gradient(
			90deg,
			var(--vss-badge-bg-color, #fff) 0%,
			var(--vss-badge-bg-color, #fff) 55%,
			color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 6%, var(--vss-badge-bg-color, #fff)) 100%
		);
	background-color: var(--vss-badge-bg-color, #ffffff);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 4px 14px var(--vss-badge-shadow, rgba(15, 23, 42, 0.04));
	margin: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	transition:
		border-color 0.2s ease,
		box-shadow 0.22s ease,
		transform 0.22s ease;
	/*
	 * Keep flex in LTR and place items with order so Elementor/Woodmart
	 * `text-left` / direction overrides cannot push Persian text to the wrong side.
	 * Visual result: [info] [text…] [icon]  (icon on the right).
	 */
	direction: ltr !important;
	unicode-bidi: isolate;
}

/* Accent signal — thin rail beside the icon (visual right). */
.vss-free-badge::before {
	content: '';
	position: absolute;
	top: 14%;
	bottom: 14%;
	right: 0;
	width: 3px;
	border-radius: 3px 0 0 3px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 35%, transparent) 0%,
		var(--vss-badge-icon-color, #2e7d32) 50%,
		color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 35%, transparent) 100%
	);
	opacity: 0.9;
	pointer-events: none;
	z-index: 1;
}

/* Soft sheen — keeps the chip feeling light, not flat. */
.vss-free-badge::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0) 42%
	);
	pointer-events: none;
	z-index: 0;
}

.vss-free-badge:hover {
	border-color: color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 28%, var(--vss-badge-border-color, #d8ebe0));
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.05),
		0 8px 22px var(--vss-badge-shadow, rgba(15, 23, 42, 0.06));
	transform: translateY(-1px);
}

.vss-free-badge > * {
	position: relative;
	z-index: 1;
}

.vss-free-badge__icon {
	flex: 0 0 var(--vss-badge-icon, 28px);
	width: var(--vss-badge-icon, 28px);
	height: var(--vss-badge-icon, 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vss-badge-icon-color, #2e7d32) !important;
	order: 3;
	border-radius: calc(var(--vss-badge-radius, 12px) * 0.55);
	background: color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 11%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 10%, transparent);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.vss-free-badge:hover .vss-free-badge__icon {
	background: color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 16%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vss-badge-icon-color, #2e7d32) 16%, transparent);
}

.vss-free-badge__icon img,
.vss-free-badge__svg {
	width: 74%;
	height: 74%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	color: inherit;
	fill: currentColor;
}

.vss-free-badge__content {
	flex: 1 1 auto;
	min-width: 0;
	order: 2;
	text-align: right !important;
	direction: rtl !important;
	padding-inline: 2px;
}

.vss-free-badge__title {
	font-size: var(--vss-badge-title-font, 13px);
	line-height: var(--vss-badge-line, 1.45);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--vss-badge-title-color, #1b7a3d) !important;
	word-break: break-word;
	text-align: right !important;
}

.vss-free-badge__subtitle {
	margin-top: 3px;
	font-size: var(--vss-badge-sub-font, 11px);
	line-height: 1.5;
	font-weight: 500;
	color: var(--vss-badge-subtitle-color, #64748b) !important;
	opacity: 0.92;
	word-break: break-word;
	text-align: right !important;
}

/*
 * Info button: force a perfect circle.
 * Themes (e.g. Woodmart) often stretch buttons with padding/line-height/min-height.
 */
.vss-free-badge__info-wrap {
	flex: 0 0 auto !important;
	align-self: center !important;
	width: var(--vss-badge-info, 22px) !important;
	height: var(--vss-badge-info, 22px) !important;
	min-width: var(--vss-badge-info, 22px) !important;
	min-height: var(--vss-badge-info, 22px) !important;
	max-width: var(--vss-badge-info, 22px) !important;
	max-height: var(--vss-badge-info, 22px) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	line-height: 0 !important;
	order: 1;
}

.vss-free-badge--small {
	--vss-badge-icon: 36px;
	--vss-badge-gap: 10px;
	--vss-badge-pad-y: 9px;
	--vss-badge-pad-x: 12px;
	--vss-badge-radius: 12px;
	--vss-badge-title-font: clamp(11.5px, 2.8vw, 13px);
	--vss-badge-sub-font: clamp(10px, 2.5vw, 11.5px);
	--vss-badge-line: 1.4;
	--vss-badge-info: 26px;
}

.vss-free-badge--medium {
	--vss-badge-icon: 44px;
	--vss-badge-gap: 12px;
	--vss-badge-pad-y: 12px;
	--vss-badge-pad-x: 14px;
	--vss-badge-radius: 14px;
	--vss-badge-title-font: clamp(12.5px, 2.6vw, 15px);
	--vss-badge-sub-font: clamp(11px, 2.4vw, 13px);
	--vss-badge-line: 1.5;
	--vss-badge-info: 28px;
}

.vss-free-badge--large {
	--vss-badge-icon: 52px;
	--vss-badge-gap: 14px;
	--vss-badge-pad-y: 14px;
	--vss-badge-pad-x: 16px;
	--vss-badge-radius: 16px;
	--vss-badge-title-font: clamp(13.5px, 2.4vw, 17px);
	--vss-badge-sub-font: clamp(12px, 2.2vw, 14px);
	--vss-badge-line: 1.55;
	--vss-badge-info: 32px;
}

@media (max-width: 480px) {
	.vss-free-badge--small {
		--vss-badge-icon: 32px;
		--vss-badge-gap: 8px;
		--vss-badge-pad-y: 8px;
		--vss-badge-pad-x: 10px;
		--vss-badge-info: 22px;
	}

	.vss-free-badge--medium {
		--vss-badge-icon: 38px;
		--vss-badge-gap: 10px;
		--vss-badge-pad-y: 10px;
		--vss-badge-pad-x: 12px;
		--vss-badge-info: 24px;
	}

	.vss-free-badge--large {
		--vss-badge-icon: 42px;
		--vss-badge-gap: 11px;
		--vss-badge-pad-y: 11px;
		--vss-badge-pad-x: 12px;
		--vss-badge-info: 26px;
	}
}

.vss-free-badge .vss-free-badge__info,
.vss-free-badge-slot .vss-free-badge__info,
.vss-free-badge__info-wrap .vss-free-badge__info,
button.vss-free-badge__info {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	align-self: center !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: 1 / 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid color-mix(in srgb, var(--vss-badge-info-color, #2e7d32) 22%, transparent) !important;
	border-radius: 7px !important;
	background: color-mix(in srgb, var(--vss-badge-info-color, #2e7d32) 9%, #fff) !important;
	color: var(--vss-badge-info-color, #2e7d32) !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 0 !important;
	font-size: 0 !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;
	overflow: hidden !important;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease,
		box-shadow 0.18s ease !important;
}

.vss-free-badge .vss-free-badge__info:hover,
.vss-free-badge .vss-free-badge__info:focus,
.vss-free-badge .vss-free-badge__info:focus-visible,
.vss-free-badge-slot .vss-free-badge__info:hover,
.vss-free-badge-slot .vss-free-badge__info:focus-visible,
.vss-free-badge__info-wrap .vss-free-badge__info:hover,
.vss-free-badge__info-wrap .vss-free-badge__info:focus-visible,
button.vss-free-badge__info:hover,
button.vss-free-badge__info:focus-visible {
	background: color-mix(in srgb, var(--vss-badge-info-color, #2e7d32) 16%, #fff) !important;
	border-color: color-mix(in srgb, var(--vss-badge-info-color, #2e7d32) 40%, transparent) !important;
	color: var(--vss-badge-info-color, #2e7d32) !important;
	filter: none !important;
	transform: scale(1.05) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vss-badge-info-color, #2e7d32) 12%, transparent) !important;
}

.vss-free-badge__info-svg {
	width: 52% !important;
	height: 52% !important;
	display: block !important;
	pointer-events: none;
	flex: none !important;
}

/* Soft mount — one intentional motion, not noise. */
@keyframes vss-badge-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.vss-free-badge-slot > .vss-free-badge {
	animation: vss-badge-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* CSS-only icon animations */
.vss-icon-anim {
	transform-origin: center center;
	will-change: transform;
}

.vss-icon-anim--none {
	animation: none;
	will-change: auto;
}

.vss-icon-anim--spin {
	animation: vss-spin 4s linear infinite;
}

.vss-icon-anim--attention {
	animation: vss-attention 3s ease-in-out infinite;
}

.vss-icon-anim--pulse {
	animation: vss-pulse 2.4s ease-in-out infinite;
}

.vss-icon-anim--bounce {
	animation: vss-bounce 2.8s ease-in-out infinite;
}

@keyframes vss-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes vss-attention {
	0%, 72% { transform: rotate(0deg); }
	78% { transform: rotate(-12deg); }
	84% { transform: rotate(360deg); }
	90%, 100% { transform: rotate(360deg); }
}

@keyframes vss-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

@keyframes vss-bounce {
	0%, 80%, 100% { transform: translateY(0); }
	88% { transform: translateY(-4px); }
	92% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.vss-free-badge,
	.vss-free-badge-slot > .vss-free-badge {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}

	.vss-free-badge:hover {
		transform: none;
	}

	.vss-icon-anim,
	.vss-icon-anim--spin,
	.vss-icon-anim--attention,
	.vss-icon-anim--pulse,
	.vss-icon-anim--bounce {
		animation: none !important;
	}
}

/* Info modal */
.vss-free-badge-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.vss-free-badge-modal.is-open {
	display: flex;
}

.vss-free-badge-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.vss-free-badge-modal__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(560px, 100%);
	max-height: min(80vh, 640px);
	background: #fff;
	border: 1px solid #eef2f6;
	border-radius: 16px;
	box-shadow:
		0 8px 16px rgba(15, 23, 42, 0.06),
		0 24px 56px rgba(15, 23, 42, 0.18);
	overflow: hidden;
	animation: vss-badge-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vss-free-badge-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid #eef2f6;
	background: linear-gradient(180deg, #fbfcfe 0%, #fff 100%);
}

.vss-free-badge-modal__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #111827;
}

.vss-free-badge-modal__close {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #f1f5f9;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.15s ease;
}

.vss-free-badge-modal__close span {
	position: absolute;
	inset: 0;
	display: block;
}

.vss-free-badge-modal__close span::before,
.vss-free-badge-modal__close span::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: #64748b;
	border-radius: 1px;
}

.vss-free-badge-modal__close span::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.vss-free-badge-modal__close span::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.vss-free-badge-modal__close:hover {
	background: #e2e8f0;
}

.vss-free-badge-modal__body {
	padding: 16px 18px;
	overflow: auto;
	font-size: 14px;
	line-height: 1.85;
	color: #334155;
	direction: rtl;
	text-align: right;
}

.vss-free-badge-modal__body p {
	margin: 0 0 0.85em;
}

.vss-free-badge-modal__body p:last-child {
	margin-bottom: 0;
}

.vss-free-badge-modal__body ul,
.vss-free-badge-modal__body ol {
	margin: 0 0 0.85em;
	padding-right: 1.2em;
}

.vss-free-badge-modal__footer {
	padding: 0;
	border-top: 1px solid #eef2f6;
}

.vss-free-badge-modal__done {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	border: 0;
	margin: 0;
	padding: 14px 18px;
	background: var(--vss-badge-info-color, #ff5c35);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.15s ease, filter 0.15s ease;
}

.vss-free-badge-modal__done:hover,
.vss-free-badge-modal__done:focus {
	background: var(--vss-badge-info-color, #ff5c35);
	color: #fff;
	filter: brightness(0.9);
}

body.vss-free-badge-modal-open {
	overflow: hidden;
}