/* Import Swiper's CSS */
@import 'swiper/swiper-bundle.css';

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

/* Alpine.js utility */
[x-cloak] {
    display: none;
}
/* In resources/css/app.css, after Tailwind imports and Swiper import */

/* Custom Swiper Styles */
/* --- Start: Explicit Swiper Core Layout Styles (for debugging & ensuring base) --- */
.swiper, /* New default class for Swiper >= 7 */
.swiper-container { /* Older class name, still often used */
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden; /* Ensure overflow is hidden */
    list-style: none;
    padding: 0;
    z-index: 1; /* Ensure swiper container is on a sensible z-index */
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex; /* CRITICAL FOR HORIZONTAL LAYOUT */
    transition-property: transform;
    box-sizing: content-box;
}

/* Specific override for your features icon slider to ensure its wrapper is flex */
.features-icon-swiper .swiper-wrapper {
    display: flex !important;
}

/* Specific override for your hero slider to ensure its wrapper is flex */
.hero-feature-swiper .swiper-wrapper {
    display: flex !important;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}
/* --- End: Explicit Swiper Core Layout Styles --- */

/* Your existing custom Swiper styles below */

.swiper-pagination-bullet-active {
    background-color: #fff !important;
    opacity: 1;
}

/* Styles for Hero Feature Slider (from _hero_feature_slider.blade.php) */
.hero-feature-slider-section .swiper-pagination-bullet-active {
    background-color: #fff !important;
}
.hero-feature-slider-section .swiper-button-next,
.hero-feature-slider-section .swiper-button-prev {
    color: #fff !important;
    background-color: rgba(0,0,0,0.2);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    transition: background-color 0.3s ease;
}
.hero-feature-slider-section .swiper-button-next:hover,
.hero-feature-slider-section .swiper-button-prev:hover {
    background-color: rgba(0,0,0,0.4);
}
.hero-feature-slider-section .swiper-button-next::after,
.hero-feature-slider-section .swiper-button-prev::after {
    font-size: 20px !important;
}
.hero-feature-slider-section .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* --- End Hero Feature Slider Styles --- */

/* Styles for Features Icon Slider (from _features_icon_slider.blade.php) */
.features-icon-slider-section .swiper-slide {
    background-color: #fff; /* Light mode background */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* shadow-lg */
    transition: box-shadow 0.3s ease-in-out;
    height: auto;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark .features-icon-slider-section .swiper-slide {
    background-color: #374151; /* gray-700 for dark mode */
}
.features-icon-slider-section .swiper-slide:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-xl */
}
.features-icon-slider-section .swiper-pagination-bullet-active {
    background-color: #7c3aed; /* purple-600 */
}
/* --- End Features Icon Slider Styles --- */

/* Custom Scrollbar Styles (from _sidebar_directory_navigator.blade.php) */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px; /* For Chrome, Safari, and Opera */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #9ca3af; /* gray-400 */
    border-radius: 10px;
}
.custom-scrollbar { /* For Firefox */
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
}
/* --- End Custom Scrollbar Styles --- */

/* Keep your animation styles here as well if they are specific to the slideshow */
/* Animation Keyframes & Classes */
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-600 { animation-delay: 600ms; }

@keyframes fade-in-down {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down { animation: fade-in-down 0.8s ease-out forwards; }

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
/* --- End Animation Styles --- */

/* Corner Tag Styles (from _latest_tenders_and_jobs_section.blade.php) */
.corner-tag {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    border-bottom-left-radius: 0.375rem; /* rounded-bl-md */
    z-index: 10; /* Ensure it's above other content in the card */
}
.tender-tag-home {
    background-color: #8b5cf6; /* purple-500 */
}
.job-tag-home {
    background-color: #3b82f6; /* blue-500 */
}
.verified-tag-home { /* New style for verified companies */
    background-color: #10b981; /* green-500 */
}
/* --- End Corner Tag Styles --- */
/* In app.css */

/* ... (your existing Tailwind imports and other styles) ... */

/* --- Marquee Styles for Features Icon Section --- */
.features-icon-marquee-section .marquee-container {
    width: 100%;
    overflow: hidden; /* Hide the parts of the content that are outside the viewport */
}

.features-icon-marquee-section .marquee-content {
    /* display: flex; /* Already added in Blade */
    /* The total width will be (number of original items + number of duplicated items) * width of each item */
    /* This animation will scroll the content to the left. */
    /* Adjust the duration (e.g., 20s) to control the speed. */
    animation: marquee-scroll 30s linear infinite;
}

.features-icon-marquee-section .marquee-item {
    /* flex-shrink: 0; /* Already using flex-none in Blade */
    /* Ensure items have a consistent height if content varies */
    min-height: 180px; /* Example min-height, adjust as needed */
    display: flex; /* To help center content if needed */
    align-items: center;
    justify-content: center;
}

/* Pause animation on hover */
.features-icon-marquee-section .marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        /* Scroll by the width of the original set of items */
        /* If you have N items, and each is W wide with M margin, scroll by N * (W + 2*M) */
        /* For simplicity, if all items are roughly the same width, scroll by -50% (half the total width of original + duplicate) */
        transform: translateX(-50%);
    }
}