/* ============================================
   AIR ECO STAY - CUSTOM STYLES
   Tailwind Customizations & Complex Effects
   ============================================ */

/* Custom Text Shadow Utilities */
.text-shadow-lg {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.text-shadow-md {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* Hero Carousel - Complex slide transitions */
.hero-slide {
    transition: opacity 1s ease-in-out, z-index 0s;
}

.hero-slide.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

.hero-slide.prev {
    opacity: 1 !important;
    z-index: 1 !important;
    transition: opacity 0.6s ease-in-out;
}

/* Ensure non-active slides are hidden */
.hero-slide:not(.active):not(.prev) {
    opacity: 0 !important;
    z-index: 0 !important;
}

/* Lightbox - Active state (Tailwind handles base styles) */
#lightbox.active {
    display: flex !important;
}

/* Ensure lightbox is flex when active */
#lightbox:not(.hidden) {
    display: flex;
}

/* Mobile Menu - Active state for Tailwind */
#mobile-menu.active {
    display: block !important;
}

/* Scroll Animation - Animated class */
.animated {
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

/* Stay Highlights Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-up-delay {
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.animate-fade-in-up-delay-2 {
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out 0.3s forwards;
    opacity: 0;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out 0.5s forwards;
    opacity: 0;
}

/* About Us Section Animations */
@keyframes expandUnderline {
    from {
        width: 0;
    }

    to {
        width: 80px;
    }
}

.animate-expand-underline {
    animation: expandUnderline 0.8s ease-out 0.7s forwards;
}

/* Footer - Center logo on mobile */
@media (max-width: 639px) {
    footer .grid>div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    footer .grid>div:first-child img {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Gallery Filter Buttons - Ensure active state overrides hover */
.filter-btn.active,
.filter-btn.active:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Navbar - Always white background on all screen sizes */
#navbar {
    background-color: #ffffff !important;
}