/* Love Buttons — frontend styles */

.lb-wrap { margin: 18px 0; }
.lb-align-center { text-align: center; }
.lb-align-left   { text-align: left; }
.lb-align-right  { text-align: right; }

.lb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.4px;
	line-height: 1.2;
	color: #fff !important;
	text-decoration: none !important;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	background-size: 300% 300%;
	box-shadow: 0 0 22px rgba(255, 60, 130, 0.45), 0 6px 18px rgba(0,0,0,0.35);
	transition: transform .25s ease, box-shadow .25s ease;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
}

.lb-btn:hover {
	transform: translateY(-4px) scale(1.05);
	box-shadow: 0 0 38px rgba(255, 60, 130, 0.75), 0 12px 28px rgba(0,0,0,0.4);
	color: #fff !important;
}
.lb-btn:active { transform: translateY(-1px) scale(0.98); }

/* ---------- 10 gradients ---------- */
.lb-g1  { background-image: linear-gradient(120deg,#ff2d78,#ff5e3a,#e63cff,#ff2d78); }
.lb-g2  { background-image: linear-gradient(120deg,#e52d5a,#ff7eb3,#e52d5a); }
.lb-g3  { background-image: linear-gradient(120deg,#7f00ff,#e100ff,#7f00ff); }
.lb-g4  { background-image: linear-gradient(120deg,#ff512f,#dd2476,#ff512f); }
.lb-g5  { background-image: linear-gradient(120deg,#12c2e9,#c471ed,#f64f59,#12c2e9); }
.lb-g6  { background-image: linear-gradient(120deg,#c31432,#ff4d6d,#c31432); }
.lb-g7  { background-image: linear-gradient(120deg,#f7971e,#ff5e62,#f7971e); }
.lb-g8  { background-image: linear-gradient(120deg,#fc466b,#3f5efb,#fc466b); }
.lb-g9  { background-image: linear-gradient(120deg,#ff758c,#ff7eb3,#ff5e8a,#ff758c); }
.lb-g10 { background-image: linear-gradient(120deg,#8e2de2,#ff2d78,#8e2de2); }

/* ---------- shared pieces ---------- */
.lb-shine {
	position: absolute; inset: 0;
	border-radius: 50px; overflow: hidden;
	pointer-events: none;
}
.lb-shine::after {
	content: '';
	position: absolute; top: -20%; left: -80%;
	width: 45%; height: 140%;
	background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
	transform: skewX(-20deg);
	animation: lbShine 3s ease-in-out infinite;
}
@keyframes lbShine { 0%{left:-80%} 55%{left:130%} 100%{left:130%} }

.lb-ico { display: inline-block; font-size: 21px; }

/* floating hearts (JS spawned) */
.lb-float-heart {
	position: absolute; bottom: 60%;
	font-size: 15px; pointer-events: none;
	animation: lbFloatUp 1.4s ease-out forwards;
	z-index: 5;
}
@keyframes lbFloatUp {
	0%   { transform: translateY(0) scale(.6) rotate(0deg); opacity: 1; }
	100% { transform: translateY(-100px) scale(1.4) rotate(22deg); opacity: 0; }
}

/* ---------- anim 1: heartbeat + pulse ring ---------- */
.lb-anim1 { animation: lbGrad 5s ease infinite, lbBeat 1.6s ease-in-out infinite; }
.lb-anim1::before {
	content: ''; position: absolute; inset: -4px;
	border-radius: 50px; border: 2px solid rgba(255,90,150,.75);
	animation: lbRing 1.6s ease-out infinite; pointer-events: none;
}
.lb-anim1 .lb-ico { animation: lbIcoBeat 1.6s ease-in-out infinite; }

@keyframes lbBeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.04)} 28%{transform:scale(1)} 42%{transform:scale(1.06)} 70%{transform:scale(1)} }
@keyframes lbIcoBeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.25)} 28%{transform:scale(1)} 42%{transform:scale(1.3)} 70%{transform:scale(1)} }
@keyframes lbRing { 0%{transform:scale(1);opacity:.9} 100%{transform:scale(1.35);opacity:0} }
@keyframes lbGrad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ---------- anim 2: flowing gradient + shine ---------- */
.lb-anim2 { animation: lbGrad 4s ease infinite; }

/* ---------- anim 3: neon glow pulse ---------- */
.lb-anim3 { animation: lbGrad 6s ease infinite, lbNeon 1.8s ease-in-out infinite; }
@keyframes lbNeon {
	0%,100% { box-shadow: 0 0 14px rgba(255,60,130,.4), 0 6px 18px rgba(0,0,0,.35); }
	50%     { box-shadow: 0 0 42px rgba(255,60,130,.95), 0 0 80px rgba(230,60,255,.35), 0 6px 18px rgba(0,0,0,.35); }
}

/* ---------- anim 4: gentle float ---------- */
.lb-anim4 { animation: lbGrad 6s ease infinite, lbFloat 2.6s ease-in-out infinite; }
@keyframes lbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.lb-anim4:hover { animation-play-state: running, paused; }

/* ---------- anim 5: pulse-grow + spinning icon on hover ---------- */
.lb-anim5 { animation: lbGrad 5s ease infinite, lbGrow 2.2s ease-in-out infinite; }
@keyframes lbGrow { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.lb-anim5:hover .lb-ico { animation: lbSpin .6s ease; }
@keyframes lbSpin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	.lb-btn, .lb-btn::before, .lb-shine::after, .lb-ico { animation: none !important; }
}

@media (max-width: 480px) {
	.lb-btn { padding: 14px 26px; font-size: 16px; }
}