@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        font-family: 'Poppins', sans-serif;
        @apply antialiased bg-gray-100;
    }
}

@layer components {
    /* Header Navigation Links */
    .nav-link {
        @apply text-gray-600 font-semibold text-lg relative after:content-[''] after:absolute after:left-0 after:bottom-[-6px] after:w-0 after:h-[3px] after:bg-blue-600 after:rounded-full after:transition-all after:duration-300 hover:after:w-full hover:text-blue-600;
    }

    .mobile-nav-link {
        @apply text-3xl font-semibold text-gray-800 hover:text-blue-600 transition-colors;
    }

    /* Section Titles */
    .section-title {
        @apply text-3xl md:text-4xl font-bold text-gray-900;
    }

    .section-subtitle {
        @apply text-gray-500 mt-3 text-lg max-w-3xl mx-auto;
    }

    /* Destination Cards */
    .dest-card {
        @apply relative rounded-lg overflow-hidden shadow-md h-28 md:h-40 block group transition-transform duration-300 hover:-translate-y-1 cursor-pointer;
    }
    .dest-card img {
        @apply w-full h-full object-cover transition-transform duration-300 group-hover:scale-110;
    }
    .dest-card span {
        @apply absolute bottom-0 left-0 right-0 text-white font-bold text-sm md:text-base p-2 text-center bg-gradient-to-t from-black/70 to-transparent;
    }

    /* Tour Package Cards */
    .tour-card {
        @apply bg-white rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 flex flex-col p-6 border border-gray-200;
    }

    .tour-card-title {
        @apply text-2xl font-bold text-gray-900 mb-1;
    }

    .tour-card-duration {
        @apply text-blue-600 mb-4 text-sm font-semibold tracking-wider uppercase;
    }

    .tour-card-desc {
        @apply text-gray-600 flex-grow mb-4;
    }
    
    .tour-card-highlights {
        @apply mt-auto pt-4 border-t border-gray-200;
    }
    .tour-card-highlights h4 {
        @apply font-bold text-gray-700 mb-2;
    }
    .tour-card-highlights ul {
        @apply flex flex-wrap gap-2;
    }
    .tour-card-highlights li {
        @apply bg-gray-200 text-gray-800 text-xs font-semibold px-2 py-1 rounded-full;
    }

    /* Footer Contact Info */
    .contact-item {
        @apply flex flex-col sm:flex-row items-center justify-center lg:justify-start sm:space-x-2;
    }

    .contact-item span:first-child {
        @apply font-semibold text-gray-100;
    }
}

/* Testimonial Slider (Swiper) */
.testimonial-slider {
    @apply w-full;
    padding: 0 40px; /* Add space for navigation buttons */
}
.swiper-slide {
    @apply bg-white p-8 rounded-lg border border-gray-200 shadow-sm text-center h-auto;
}
.swiper-quote {
    @apply text-gray-600 italic text-lg mb-4;
}
.swiper-name {
    @apply font-bold text-blue-800;
}
.swiper-button-next, .swiper-button-prev {
    @apply text-blue-600;
}
.swiper-button-next::after, .swiper-button-prev::after {
    @apply text-2xl font-extrabold;
}

/* Destination Modal */
#destination-modal.open {
    @apply flex;
}
#destination-modal.open #modal-content {
    @apply scale-100 opacity-100;
}