#bars.svelte-16vvjpq div:where(.svelte-16vvjpq) {
		background-color: #fff;
		border-radius: 6px;
		flex: 1 1 0%;
	}

	/* Swiper adds classes like .swiper-pagination-bullet and .swiper-pagination-bullet-active */
	/* You need to style them yourself if they are outside the default Swiper CSS scope */
	.swiper-pagination-external .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		background-color: #ccc;
		border-radius: 50%;
		display: inline-block;
		margin: 0 5px;
		cursor: pointer;
		opacity: 0.7;
	}

	.swiper-pagination-external .swiper-pagination-bullet-active {
		background-color: oklch(58.6% 0.253 17.585);
		opacity: 1;
	}

	.heart-container.svelte-19ck0r0 {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; /* So it doesn't interfere with clicks */
		overflow: hidden; /* Hide hearts that go off-screen */
		z-index: 1; /* Behind content */
	}

	.heart.svelte-19ck0r0 {
		opacity: 0;
		position: absolute;
		padding: 0;
		width: 25px;
		height: 25px;
		animation: svelte-19ck0r0-floatHeart 10s infinite ease-in-out;
		background-image: url('../../../images/emoji/heart.svg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	@keyframes svelte-19ck0r0-floatHeart {
		0% {
			transform: translateY(100vh) rotate(0deg);
			opacity: 0;
		}
		20%,
		90% {
			opacity: 0.6;
		}
		100% {
			transform: translateY(-10vh) rotate(720deg);
			opacity: 0;
		}
	}
	/* Create multiple hearts with delays */
	.heart.svelte-19ck0r0:nth-child(1) {
		animation-delay: 0s;
		left: 10%;
	}
	.heart.svelte-19ck0r0:nth-child(2) {
		animation-delay: 1.5s;
		left: 20%;
		width: 30px;
		height: 30px;
	}
	.heart.svelte-19ck0r0:nth-child(3) {
		animation-delay: 3s;
		left: 30%;
	}
	.heart.svelte-19ck0r0:nth-child(4) {
		animation-delay: 4.5s;
		left: 40%;
		width: 25px;
		height: 25px;
	}
	.heart.svelte-19ck0r0:nth-child(5) {
		animation-delay: 6s;
		left: 50%;
	}
	.heart.svelte-19ck0r0:nth-child(6) {
		animation-delay: 7.5s;
		left: 60%;
		width: 18px;
		height: 18px;
	}
	.heart.svelte-19ck0r0:nth-child(7) {
		animation-delay: 9s;
		left: 70%;
	}
	.heart.svelte-19ck0r0:nth-child(8) {
		animation-delay: 2s;
		left: 80%;
		width: 50px;
		height: 50px;
	}
	.heart.svelte-19ck0r0:nth-child(9) {
		animation-delay: 4s;
		left: 90%;
	}
	.heart.svelte-19ck0r0:nth-child(10) {
		animation-delay: 6.5s;
		left: 5%;
		width: 40px;
		height: 40px;
	}