/**
 * Best Selling Products — buttons, badges, logo card, hover effects & responsive.
 * Loaded together with frontend.css. Split out to keep each file maintainable.
 */

/* ---------- Button ---------- */
.bsp-btn {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 85%;
	padding: 10px 0;
	border: none;
	border-radius: var(--bsp-btn-radius, 10px);
	background: var(--bsp-btn-current, var(--bsp-btn));
	color: var(--bsp-btn-text-current, var(--bsp-btn-text, #fff));
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.bsp-btn:hover {
	background: var(--bsp-btn-current, var(--bsp-btn));
	color: var(--bsp-btn-text-current, var(--bsp-btn-text, #fff));
	text-decoration: none;
}

/* Prevent theme/WooCommerce button:hover styles from injecting orange colors. */
.bsp-root .bsp-btn,
.bsp-root .bsp-btn:hover,
.bsp-root .bsp-btn:focus,
.bsp-root .bsp-btn:active {
	background: var(--bsp-btn-current, var(--bsp-btn)) !important;
	color: var(--bsp-btn-text-current, var(--bsp-btn-text, #fff)) !important;
}
.bsp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bsp-btn.is-loading .bsp-btn-label { visibility: hidden; }
.bsp-btn.is-done { background: #10b981; }

/* Button style variants (data-style attribute). */
.bsp-btn[data-style="outline"] {
	background: transparent !important;
	color: var(--bsp-btn);
	border: 2px solid var(--bsp-btn);
}
.bsp-btn[data-style="outline"]:hover { background: transparent !important; color: var(--bsp-btn) !important; }
.bsp-btn[data-style="glass"] {
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.bsp-btn[data-style="glass"]:hover { background: rgba(255, 255, 255, 0.1) !important; }
.bsp-btn[data-style="neon"] {
	background: var(--bsp-btn-neon-current, var(--bsp-btn-neon, var(--bsp-btn-current, var(--bsp-btn)))) !important;
	box-shadow: 0 0 var(--bsp-btn-glow, 14px) var(--bsp-btn-neon-current, var(--bsp-btn-neon, var(--bsp-btn-current, var(--bsp-btn)))), 0 0 calc(var(--bsp-btn-glow, 14px) * 2) var(--bsp-btn-neon-current, var(--bsp-btn-neon, var(--bsp-btn-current, var(--bsp-btn))));
}
.bsp-btn[data-style="neon"]:hover { box-shadow: 0 0 var(--bsp-btn-glow, 14px) var(--bsp-btn-neon-current, var(--bsp-btn-neon, var(--bsp-btn-current, var(--bsp-btn)))), 0 0 calc(var(--bsp-btn-glow, 14px) * 2) var(--bsp-btn-neon-current, var(--bsp-btn-neon, var(--bsp-btn-current, var(--bsp-btn)))); }
.bsp-btn[data-style="gradient"] {
	background: linear-gradient(135deg, var(--bsp-btn-current, var(--bsp-btn)), var(--bsp-btn-hover)) !important;
	border: none;
}
.bsp-btn[data-style="gradient"]:hover { filter: none; }

.bsp-spinner {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
}
.bsp-btn.is-loading .bsp-spinner { opacity: 1; animation: bsp-orbit 0.7s linear infinite; }

/* ---------- Badge (shown on ALL cards, position: right/center/left) ---------- */
.bsp-badge {
	position: absolute;
	top: 12px;
	z-index: 101; /* Highest layer, above orbit light */
	padding: 4px 12px;
	border-radius: 99px;
	background: var(--bsp-badge);
	color: #fff;
	font-size: var(--bsp-badge-sz, 11px);
	font-weight: 700;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.bsp-badge[data-pos="right"] { inset-inline-end: 12px; inset-inline-start: auto; }
.bsp-badge[data-pos="center"] { left: 50%; transform: translateX(-50%); }
.bsp-badge[data-pos="left"] { inset-inline-start: 12px; inset-inline-end: auto; }

/* ---------- Logo card ---------- */
.bsp-card--logo { justify-content: center; gap: 22px; padding: 0 14px; }
.bsp-logo-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-decoration: none; }
.bsp-logo-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.bsp-logo-img { max-width: 110px; max-height: 90px; width: auto; height: auto; object-fit: contain; transition: opacity 0.2s ease; }
.bsp-logo-img--hover { position: absolute; inset: 0; margin: auto; opacity: 0; }
.bsp-card--logo:hover .bsp-logo-img--hover { opacity: 1; }
.bsp-card--logo:hover .bsp-logo-img:not(.bsp-logo-img--hover) { opacity: 0; }
.bsp-logo-brand { letter-spacing: 0.35em; font-size: 14px; color: var(--bsp-neon); text-align: center; }
.bsp-logo-title { margin: 0; text-align: center; color: var(--bsp-title, #fff);
	font-size: var(--bsp-title-size, 22px); font-weight: var(--bsp-title-wght, 800); line-height: 1.7; }
.bsp-card--logo:hover .bsp-logo-brand,
.bsp-card--logo:hover .bsp-logo-title { color: var(--bsp-logo-hover, var(--bsp-title, #fff)); }

/* ---------- Card hover color state ---------- */
.bsp-card:hover {
	--bsp-card-current: var(--bsp-card-hover, var(--bsp-card));
	--bsp-title-current: var(--bsp-title-hover, var(--bsp-title));
	--bsp-price-current: var(--bsp-price-hover, var(--bsp-price));
	--bsp-btn-current: var(--bsp-btn-hover, var(--bsp-btn));
	--bsp-btn-text-current: var(--bsp-btn-hover-text, var(--bsp-btn-text));
	--bsp-btn-neon-current: var(--bsp-btn-hover, var(--bsp-btn-neon, var(--bsp-btn)));
	--bsp-orb-current: var(--bsp-orb-hover, var(--bsp-orb-color));
	--bsp-orb-spd-current: var(--bsp-orb-hspd, var(--bsp-orb-spd));
}

/* ---------- Hover effects (only when hover animation toggle is on) ---------- */
.bsp-root[data-anim-hover="1"][data-hover="lift"] .bsp-card:hover { transform: translateY(-12px); }
.bsp-root[data-anim-hover="1"][data-hover="scale"] .bsp-card:hover { transform: scale(1.04); }
.bsp-root[data-anim-hover="1"][data-hover="glow"] .bsp-card:hover { box-shadow: 0 0 34px var(--bsp-neon); }
.bsp-root[data-anim-hover="1"][data-hover="tilt"] .bsp-card:hover { transform: perspective(900px) rotateX(6deg) rotateY(-6deg); }
.bsp-root[data-anim-hover="1"][data-hover="shadowLift"] .bsp-card:hover { transform: translateY(-10px); box-shadow: 0 28px 50px rgba(0,0,0,.6); }
.bsp-root[data-anim-hover="1"][data-hover="borderGlow"] .bsp-card:hover { box-shadow: inset 0 0 0 2px var(--bsp-neon), 0 0 28px var(--bsp-neon); }
.bsp-root[data-anim-hover="1"][data-hover="imageZoom"] .bsp-card:hover .bsp-prod { transform: translateY(var(--bsp-offset,0)) scale(1.12); }
.bsp-root[data-anim-hover="1"][data-hover="imageFloat"] .bsp-card:hover .bsp-prod { transform: translateY(calc(var(--bsp-offset,0px) - 14px)); }

.bsp-sheen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.bsp-sheen::before {
	content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
	transform: translateX(-130%) skewX(-18deg); opacity: 0;
}
.bsp-root[data-anim-hover="1"][data-hover="lightSweep"] .bsp-card:hover .bsp-sheen::before,
.bsp-root[data-anim-hover="1"][data-hover="glassShine"] .bsp-card:hover .bsp-sheen::before {
	opacity: 1; animation: bsp-sweep 0.9s ease;
}
@keyframes bsp-sweep {
	to { transform: translateX(230%) skewX(-18deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.bsp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.bsp-grid { grid-template-columns: repeat(var(--bsp-m-cols, 2), minmax(0, 1fr)); }
	.bsp-card-wrap, .bsp-card { height: auto; min-height: 320px; }
	.bsp-card { padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.bsp-card, .bsp-prod, .bsp-glow { animation: none !important; }
}