/* resources/css/app.css */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@300;400;500&display=swap');

@tailwind base;

/* Apply fonts globally */
html, body {
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Bebas Neue', sans-serif;
}

@tailwind components;
@tailwind utilities;

/* Custom utility for toast notifications */
@layer utilities {
    .toast {
        @apply fixed bottom-4 right-4 p-4 rounded shadow-lg text-white font-sans;
    }
    .text-shadow {
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }
}

/* Existing animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 1s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 0.5s ease-in-out;
}

/* Existing Swiper and other styles */
.swiper-button-prev,
.swiper-button-next {
    color: white;
}
.fixed.bottom-4.right-4 {
    z-index: 1000;
}
.swiper-pagination-bullet {
    background: #d1d5db; /* Tailwind gray-300 */
}
.swiper-pagination-bullet-active {
    background: #facc15; /* Tailwind yellow-500 */
}
[x-show="false"] { display: none !important; }
[x-show="true"] { display: block !important; }