.bbs-wrap {
	display: flex;
	width: 100%;
	margin: 0.75rem 0;
}

.bbs-wrap.bbs-align-left {
	justify-content: flex-start;
}

.bbs-wrap.bbs-align-center {
	justify-content: center;
}

.bbs-wrap.bbs-align-right {
	justify-content: flex-end;
}

.bbs-button {
	--bbs-bg: #e63946;
	--bbs-hover-bg: #c92334;
	--bbs-color: #ffffff;
	--bbs-hover-color: #ffffff;
	--bbs-border-color: #e63946;
	--bbs-radius: 8px;
	--bbs-border-width: 0px;
	--bbs-speed: 0.35s;
	--bbs-shine-speed: 0.77s;
	--bbs-pulse-speed: 1.12s;
	--bbs-loop-speed: 1.575s;
	--bbs-lift-y: -7px;
	--bbs-lift-rebound: -2.5px;
	--bbs-motion-scale: 1.07;
	--bbs-ring-scale: 1.45;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	isolation: isolate;
	border: var(--bbs-border-width) solid var(--bbs-border-color);
	border-radius: var(--bbs-radius);
	background: var(--bbs-bg);
	color: var(--bbs-color) !important;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	vertical-align: middle;
	cursor: pointer;
	transition:
		background-color var(--bbs-speed) ease,
		color var(--bbs-speed) ease,
		border-color var(--bbs-speed) ease,
		box-shadow var(--bbs-speed) ease,
		transform var(--bbs-speed) ease;
	-webkit-tap-highlight-color: transparent;
}

.bbs-button-text {
	position: relative;
	z-index: 2;
}

.bbs-size-small {
	padding: 0.65em 1.15em;
	font-size: 13px;
}

.bbs-size-medium {
	padding: 0.85em 1.55em;
	font-size: 15px;
}

.bbs-size-large {
	padding: 1em 2em;
	font-size: 18px;
}

.bbs-width-full {
	width: 100%;
}

.bbs-shadow-none {
	box-shadow: none;
}

.bbs-shadow-soft {
	box-shadow: 0 5px 14px rgba(17, 24, 39, 0.12);
}

.bbs-shadow-medium {
	box-shadow: 0 8px 22px rgba(17, 24, 39, 0.2);
}

.bbs-shadow-strong {
	box-shadow: 0 12px 30px rgba(17, 24, 39, 0.3);
}

.bbs-button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--bbs-bg) 45%, transparent);
	outline-offset: 3px;
}

/* Lift */
.bbs-template-lift:not(.bbs-no-effect):hover {
	transform: translateY(var(--bbs-lift-y));
	background: var(--bbs-hover-bg);
	color: var(--bbs-hover-color) !important;
	box-shadow: 0 14px 28px rgba(17, 24, 39, 0.28);
}

.bbs-template-lift:not(.bbs-no-effect):active {
	transform: translateY(-1px);
}

/* Shine */
.bbs-template-shine::before {
	position: absolute;
	z-index: 1;
	top: -30%;
	left: 0;
	width: 42%;
	height: 160%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	content: "";
	transform: translateX(-180%) rotate(12deg);
	transition: transform var(--bbs-shine-speed) ease;
}

.bbs-template-shine:not(.bbs-no-effect):hover {
	background: var(--bbs-hover-bg);
	color: var(--bbs-hover-color) !important;
}

.bbs-template-shine:not(.bbs-no-effect):hover::before {
	transform: translateX(340%) rotate(12deg);
}

/* Slide */
.bbs-template-slide::before {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: var(--bbs-hover-bg);
	content: "";
	transition: transform var(--bbs-speed) cubic-bezier(0.65, 0, 0.35, 1);
}

.bbs-template-slide.bbs-slide-left::before {
	transform: translateX(-101%);
}

.bbs-template-slide.bbs-slide-right::before {
	transform: translateX(101%);
}

.bbs-template-slide.bbs-slide-top::before {
	transform: translateY(-101%);
}

.bbs-template-slide.bbs-slide-bottom::before {
	transform: translateY(101%);
}

.bbs-template-slide:not(.bbs-no-effect):hover {
	color: var(--bbs-hover-color) !important;
}

.bbs-template-slide:not(.bbs-no-effect):hover::before {
	transform: translate(0, 0);
}

/* Pulse */
.bbs-template-pulse {
	overflow: visible;
}

.bbs-template-pulse::after {
	position: absolute;
	z-index: 0;
	inset: -1px;
	border: 3px solid var(--bbs-bg);
	border-radius: inherit;
	content: "";
	opacity: 0;
	pointer-events: none;
}

.bbs-template-pulse:not(.bbs-no-effect):hover {
	background: var(--bbs-hover-bg);
	color: var(--bbs-hover-color) !important;
	transform: scale(var(--bbs-motion-scale));
}

.bbs-template-pulse.bbs-pulse-hover:not(.bbs-no-effect):hover::after,
.bbs-template-pulse.bbs-pulse-continuous:not(.bbs-no-effect)::after {
	animation: bbs-pulse var(--bbs-pulse-speed) ease-out infinite;
}

@keyframes bbs-pulse {
	0% {
		opacity: 0.75;
		transform: scale(0.96);
	}

	100% {
		opacity: 0;
		transform: scale(var(--bbs-ring-scale));
	}
}

/* Attention controls */
.bbs-intensity-soft {
	--bbs-lift-y: -2px;
	--bbs-lift-rebound: -1px;
	--bbs-motion-scale: 1.02;
	--bbs-ring-scale: 1.18;
}

.bbs-intensity-medium {
	--bbs-lift-y: -4px;
	--bbs-lift-rebound: -1.5px;
	--bbs-motion-scale: 1.04;
	--bbs-ring-scale: 1.3;
}

.bbs-intensity-strong {
	--bbs-lift-y: -7px;
	--bbs-lift-rebound: -2.5px;
	--bbs-motion-scale: 1.07;
	--bbs-ring-scale: 1.45;
}

.bbs-template-lift.bbs-autoplay:not(.bbs-no-effect) {
	animation: bbs-attention-bounce var(--bbs-loop-speed) cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.bbs-template-shine.bbs-autoplay:not(.bbs-no-effect) {
	animation: bbs-glow-breathe var(--bbs-loop-speed) ease-in-out infinite;
}

.bbs-template-shine.bbs-autoplay:not(.bbs-no-effect)::before {
	animation: bbs-laser-sweep var(--bbs-loop-speed) ease-in-out infinite;
}

.bbs-template-slide.bbs-autoplay:not(.bbs-no-effect) {
	animation: bbs-color-beat var(--bbs-loop-speed) ease-in-out infinite;
}

.bbs-template-slide.bbs-slide-left.bbs-autoplay:not(.bbs-no-effect)::before {
	animation: bbs-swipe-left var(--bbs-loop-speed) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.bbs-template-slide.bbs-slide-right.bbs-autoplay:not(.bbs-no-effect)::before {
	animation: bbs-swipe-right var(--bbs-loop-speed) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.bbs-template-slide.bbs-slide-top.bbs-autoplay:not(.bbs-no-effect)::before {
	animation: bbs-swipe-top var(--bbs-loop-speed) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.bbs-template-slide.bbs-slide-bottom.bbs-autoplay:not(.bbs-no-effect)::before {
	animation: bbs-swipe-bottom var(--bbs-loop-speed) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.bbs-template-pulse.bbs-autoplay:not(.bbs-no-effect) {
	animation: bbs-neon-beat var(--bbs-loop-speed) ease-in-out infinite;
}

.bbs-template-pulse.bbs-autoplay:not(.bbs-no-effect)::after {
	animation: bbs-pulse var(--bbs-pulse-speed) ease-out infinite;
}

.bbs-button.bbs-autoplay:not(.bbs-no-effect):hover {
	animation: none;
}

@keyframes bbs-attention-bounce {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	42% {
		transform: translateY(var(--bbs-lift-y)) scale(var(--bbs-motion-scale));
	}
	58% {
		transform: translateY(1px) scale(0.99);
	}
	72% {
		transform: translateY(var(--bbs-lift-rebound)) scale(1.01);
	}
}

@keyframes bbs-glow-breathe {
	0%, 100% {
		filter: drop-shadow(0 0 0 transparent);
		transform: scale(1);
	}
	50% {
		filter: drop-shadow(0 0 9px var(--bbs-bg));
		transform: scale(var(--bbs-motion-scale));
	}
}

@keyframes bbs-laser-sweep {
	0%, 12% {
		transform: translateX(-180%) rotate(12deg);
	}
	68%, 100% {
		transform: translateX(340%) rotate(12deg);
	}
}

@keyframes bbs-color-beat {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(var(--bbs-motion-scale)); }
}

@keyframes bbs-swipe-left {
	0%, 12% { transform: translateX(-101%); }
	48%, 64% { transform: translateX(0); }
	100% { transform: translateX(101%); }
}

@keyframes bbs-swipe-right {
	0%, 12% { transform: translateX(101%); }
	48%, 64% { transform: translateX(0); }
	100% { transform: translateX(-101%); }
}

@keyframes bbs-swipe-top {
	0%, 12% { transform: translateY(-101%); }
	48%, 64% { transform: translateY(0); }
	100% { transform: translateY(101%); }
}

@keyframes bbs-swipe-bottom {
	0%, 12% { transform: translateY(101%); }
	48%, 64% { transform: translateY(0); }
	100% { transform: translateY(-101%); }
}

@keyframes bbs-neon-beat {
	0%, 100% {
		filter: drop-shadow(0 0 2px var(--bbs-bg));
		transform: scale(1);
	}
	45% {
		filter: drop-shadow(0 0 12px var(--bbs-bg));
		transform: scale(var(--bbs-motion-scale));
	}
	55% { transform: scale(0.99); }
	68% { transform: scale(1.03); }
}

.bbs-button.bbs-no-effect:hover {
	background: var(--bbs-hover-bg);
	color: var(--bbs-hover-color) !important;
}

.bbs-button.bbs-no-effect::before,
.bbs-button.bbs-no-effect::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bbs-button,
	.bbs-button::before,
	.bbs-button::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	.bbs-button:hover {
		transform: none !important;
	}
}