/**
 * Best Selling Products — frontend styles.
 * All selectors are namespaced under .bsp-root to avoid theme conflicts.
 */

@property --bsp-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.bsp-root {
	background: var(--bsp-bg, transparent);
	padding: var(--bsp-gap, 18px);
	border-radius: 20px;
	max-width: var(--bsp-container, 1400px);
	margin-inline: auto;
	font-family: var(--bsp-font, "Vazirmatn"), system-ui, sans-serif;
	direction: rtl;
	box-sizing: border-box;
}

/* Fullscreen mode: breaks out of theme/page-builder containers safely. */
.bsp-root[data-fullscreen="1"] {
	width: 100vw;
	max-width: none;
	min-height: 100vh;
	min-height: 100svh;
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: clip;
}

.bsp-root[data-fullscreen="1"] .bsp-grid {
	width: min(var(--bsp-container, 1400px), calc(100vw - (var(--bsp-gap, 18px) * 2)));
	margin-inline: auto;
}

.bsp-grid {
	display: grid;
	grid-template-columns: repeat(var(--bsp-cols, 7), minmax(0, 1fr));
	grid-template-rows: repeat(var(--bsp-rows, 1), auto);
	gap: var(--bsp-gap, 18px);
}

.bsp-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--bsp-title, #fff);
	opacity: 0.7;
}

/* ---------- Card shell ---------- */
.bsp-card-wrap {
	position: relative;
	height: var(--bsp-card-h, 430px);
	border-radius: var(--bsp-radius, 110px) var(--bsp-radius, 110px) 22px 22px;
}

.bsp-card {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: var(--bsp-radius, 110px) var(--bsp-radius, 110px) 22px 22px;
	background:
		linear-gradient(var(--bsp-card-current, var(--bsp-card)), var(--bsp-card-current, var(--bsp-card))) padding-box,
		conic-gradient(from var(--bsp-angle), transparent 0deg, var(--bsp-anim-border, #19b9c7) 60deg,
			transparent 140deg, transparent 220deg, var(--bsp-anim-border, #19b9c7) 300deg, transparent 360deg) border-box;
	border: var(--bsp-border-w, 2px) solid transparent;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: visible; /* Allow badge to overflow */
}

/* Animated rotating neon border — only when BOTH master & border anim are on. */
.bsp-root[data-animated-border="1"][data-anim="1"] .bsp-card {
	animation: bsp-spin var(--bsp-border-spd, 6s) linear infinite;
}

/* --- Orbiting Light (Conic Gradient Loop on Border) --- */
@property --bsp-orb-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.bsp-orbit {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--bsp-border-w, 2px);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: 100;
	pointer-events: none;
	display: none;
}

/* 1 Light — 30° soft fade, sharp trailing edge */
.bsp-root[data-orbit-count="1"][data-orbit-light="1"] .bsp-orbit {
	display: block;
	background: conic-gradient(from var(--bsp-orb-ang), transparent 0deg, transparent 330deg, var(--bsp-orb-current, var(--bsp-orb-color, #fff)) 360deg) border-box;
}

/* 2 Lights (Opposite) — each identical 30° wedge with sharp trailing edge */
.bsp-root[data-orbit-count="2"][data-orbit-light="1"] .bsp-orbit {
	display: block;
	background: conic-gradient(from var(--bsp-orb-ang),
		transparent 0deg, transparent 150deg,
		var(--bsp-orb-current, var(--bsp-orb-color, #fff)) 180deg, transparent 180deg,
		transparent 330deg, var(--bsp-orb-current, var(--bsp-orb-color, #fff)) 360deg) border-box;
}

.bsp-root[data-orbit-light="1"][data-anim="1"][data-anim-orbit="1"] .bsp-orbit {
	animation: bsp-orb-spin var(--bsp-orb-spd-current, var(--bsp-orb-spd, 4s)) linear infinite;
}
@keyframes bsp-orb-spin { to { --bsp-orb-ang: 360deg; } }

/* Static neon border when the rotation is turned off. */
.bsp-root[data-animated-border="0"] .bsp-card {
	background: var(--bsp-card-current, var(--bsp-card));
	border: var(--bsp-border-w, 2px) solid var(--bsp-neon);
}

/* Independent BORDER GLOW (the halo AROUND the card frame). */
.bsp-root[data-border-glow="1"] .bsp-card {
	box-shadow: 0 0 var(--bsp-bglow-size, 18px)
		color-mix(in srgb, var(--bsp-bglow-color, #19b9c7) calc(var(--bsp-bglow-op, 0.6) * 100%), transparent);
}
.bsp-root[data-border-glow="0"] .bsp-card {
	box-shadow: none;
}

@keyframes bsp-spin {
	to { --bsp-angle: 360deg; }
}

/* ---------- Media + glow ---------- */
.bsp-media {
	position: relative;
	margin-top: 36px;
	height: 44%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bsp-media img,
.bsp-prod {
	position: relative;
	z-index: 2;
	max-height: 150px;
	width: auto;
	object-fit: contain;
	transform: translateY(var(--bsp-offset, 0));
	transition: transform 0.3s ease;
	filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.45));
}

.bsp-root[data-anim="1"][data-anim-float="1"] .bsp-prod {
	animation: bsp-float 5s ease-in-out infinite;
}

@keyframes bsp-float {
	0%, 100% { transform: translateY(var(--bsp-offset, 0)); }
	50% { transform: translateY(calc(var(--bsp-offset, 0px) + var(--bsp-float-dist, -10px))); }
}

/* Independent PRODUCT GLOW (the blurred light INSIDE the card). */
.bsp-glow {
	position: absolute;
	z-index: 0;
	width: calc(var(--bsp-glow-size, 70px) * 2);
	height: calc(var(--bsp-glow-size, 70px) * 2);
	border-radius: 50%;
	background: radial-gradient(circle, var(--bsp-glow-color) 0%, transparent 70%);
	opacity: var(--bsp-glow-op, 0.55);
	filter: blur(var(--bsp-glow-blur, 40px));
	pointer-events: none;
}
.bsp-card[data-product-glow="0"] .bsp-glow { display: none; }

.bsp-prod--placeholder {
	display: block;
	width: 90px;
	height: 90px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.15);
}
.bsp-btn--link { display: inline-block; text-decoration: none; text-align: center; }

/* Product-glow animation only when master + glow-anim toggles are BOTH on.
   When glow animation is off, the glow stays visible but completely static. */
.bsp-root[data-anim="1"][data-anim-glow="1"] .bsp-card[data-glow="rotate"] .bsp-glow,
.bsp-root[data-anim="1"][data-anim-glow="1"] .bsp-card[data-glow="orbit"] .bsp-glow {
	background: conic-gradient(from 0deg, var(--bsp-glow-color), transparent, var(--bsp-glow-color), transparent) !important;
	animation: bsp-glow-spin var(--bsp-glow-spd, 8s) linear infinite !important;
}

.bsp-root[data-anim="1"][data-anim-glow="1"] .bsp-card[data-glow="pulse"] .bsp-glow {
	animation: bsp-glow-pulse var(--bsp-glow-spd, 8s) ease-in-out infinite !important;
}

@keyframes bsp-glow-spin { to { transform: rotate(360deg); } }
@keyframes bsp-glow-pulse {
	0%, 100% { transform: scale(0.85); opacity: calc(var(--bsp-glow-op) * 0.6); }
	50% { transform: scale(1.15); opacity: var(--bsp-glow-op); }
}

/* ---------- Body / typography ---------- */
.bsp-body {
	margin-top: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 12px 24px;
	text-align: center;
}

.bsp-title { margin: 0; font-size: var(--bsp-title-size, 22px); font-weight: var(--bsp-title-wght, 800);
	letter-spacing: var(--bsp-letter, 0); line-height: 1.3; }
.bsp-title a { color: var(--bsp-title-current, var(--bsp-title, #fff)); text-decoration: none; }
.bsp-title { color: var(--bsp-title-current, var(--bsp-title, #fff)); }
.bsp-price { color: var(--bsp-price-current, var(--bsp-price, #cfe9ee)); font-size: var(--bsp-price-sz, 15px); margin-bottom: var(--bsp-pb-gap, 10px); }

/* Buttons, badges, logo card, hover effects & responsive live in
   frontend-effects.css (loaded as a dependency) to keep files maintainable. */