@import "tailwindcss";

@layer components {

    /* Swiper carousel styles */
    .swiper {
        @apply w-full overflow-hidden relative;
        position: relative;
    }

    .swiper-wrapper {
        @apply flex w-full;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
    }

    .swiper-slide {
        @apply flex-shrink-0 flex items-center justify-center;
        width: 100%;
        height: 100%;
        display: flex;
    }

    .swiper-slide img,
    .swiper-slide video {
        @apply w-full h-full;
        display: block;
        object-fit: contain;
    }

    /* Navigation buttons */
    .swiper-button-next,
    .swiper-button-prev {
        @apply absolute top-1/2 transform -translate-y-1/2 z-20 w-12 h-12 rounded-full flex items-center justify-center cursor-pointer transition-colors;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        outline: none;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* Hide the default SVG icons and pseudo-elements from Swiper */
    .swiper-button-next svg,
    .swiper-button-prev svg {
        display: none !important;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        content: "" !important;
    }

    /* Add our custom text content */
    .swiper-button-next {
        right: 1rem;
        font-size: 24px;
        font-weight: bold;
    }

    .swiper-button-next::before {
        content: "→";
    }

    .swiper-button-prev {
        left: 1rem;
        font-size: 24px;
        font-weight: bold;
    }

    .swiper-button-prev::before {
        content: "←";
    }

    /* Pagination dots */
    .swiper-pagination {
        @apply absolute bottom-4 left-1/2 transform -translate-x-1/2 z-20 flex gap-2 justify-center;
    }

    .swiper-pagination-bullet {
        @apply w-2 h-2 rounded-full cursor-pointer transition-colors;
        background-color: rgba(255, 255, 255, 0.5);
        border: none;
    }

    .swiper-pagination-bullet-active {
        @apply bg-white;
        background-color: rgba(255, 255, 255, 1);
    }

    /* Donation notification animations */
    .animate-slide-in {
        animation: slideIn 0.5s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-slide-down {
        animation: slideDown 0.5s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-100%);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}