/* Additional Tailwind-compatible styles for Santa Maria Lodge */

/* Lightbox compatibility with Tailwind */
.lightbox {
    @apply fixed inset-0 bg-black bg-opacity-90 z-50 hidden cursor-pointer;
}

.lightbox.active {
    @apply flex justify-center items-center;
}

.lightbox img {
    @apply max-w-[90%] max-h-[90%] object-contain rounded-lg shadow-2xl;
}

.lightbox-close {
    @apply absolute top-5 right-8 text-white text-4xl font-bold cursor-pointer select-none transition-opacity duration-300 z-50;
}

.lightbox-close:hover {
    @apply opacity-70;
}

.lightbox-nav {
    @apply absolute top-1/2 transform -translate-y-1/2 text-white text-3xl font-bold cursor-pointer select-none transition-all duration-300 z-50 p-5 bg-black bg-opacity-50 rounded-full w-15 h-15 flex items-center justify-center;
}

.lightbox-nav:hover {
    @apply bg-black bg-opacity-80 opacity-90;
}

.lightbox-prev {
    @apply left-8;
}

.lightbox-next {
    @apply right-8;
}

.lightbox-counter {
    @apply absolute bottom-5 left-1/2 transform -translate-x-1/2 text-white text-base bg-black bg-opacity-70 px-4 py-2 rounded-full z-50;
}

/* Image gallery enhancements */
.image-card img {
    @apply cursor-pointer transition-all duration-300;
}

.image-card img:hover {
    @apply scale-105 brightness-110;
}

/* Custom Italian flag animation */
.italian-flag-animated {
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

/* Mobile navigation improvements */
@media (max-width: 768px) {
    .nav-scroll {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nav-scroll::-webkit-scrollbar {
        display: none;
    }
}