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

:root {
    --color-primary: 31 41 55; /* RGB for tailwind gray-800 */
    --color-secondary: 100 116 139; /* RGB for tailwind slate-500 */
}

/* Custom styles for dropdowns */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 8px; /* Added padding for better click area */
    border-radius: 4px;
    transition: background-color 0.2s;
}

.dropdown-btn:hover {
    background-color: #f3f4f6; /* Tailwind gray-100 */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
    border-radius: 8px;
    overflow: hidden; /* Ensures rounded corners for children */
    margin-top: 4px; /* Space between button and dropdown */
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: #f3f4f6; /* Tailwind gray-100 */
}

.dropdown-content.show {
    display: block;
}

/* Styles for frontend/pages/home.blade.php */
@layer components {
    /* Modern Hero Carousel */
    .carousel-container {
        @apply relative w-full h-full;
    }
    .carousel-track {
        @apply flex w-full h-full transition-transform duration-500 ease-in-out;
    }
    .carousel-slide {
        @apply relative flex-shrink-0 w-full h-full;
    }
    .carousel-image {
        @apply w-full h-full object-cover;
    }
    .carousel-content {
        @apply absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-6 md:p-10 text-white;
    }
    .carousel-title {
        @apply text-2xl md:text-4xl font-bold mb-2;
    }
    .carousel-description {
        @apply text-sm md:text-lg mb-4 max-w-md;
    }
    .carousel-button {
        @apply bg-white text-black font-bold py-2 px-5 rounded-full self-start hover:bg-gray-200 transition-colors;
    }
    .carousel-indicator {
        @apply absolute top-4 right-4 bg-blue-600 text-white text-xs font-bold px-3 py-1.5 rounded-full;
    }
    .carousel-arrow {
        @apply absolute top-1/2 -translate-y-1/2 bg-black/30 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-black/50 transition-colors z-10;
    }
    .carousel-arrow.prev {
        @apply left-4;
    }
    .carousel-arrow.next {
        @apply right-4;
    }
    .carousel-nav {
        @apply absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2;
    }
    .carousel-dot {
        @apply w-2.5 h-2.5 bg-white/50 rounded-full hover:bg-white transition-colors;
    }
    .carousel-dot.active {
        @apply bg-white;
    }

    /* Right Side Product Cards */
    .product-side-card {
        @apply relative block rounded-2xl overflow-hidden h-full shadow-lg;
    }
    .product-side-image {
        @apply w-full h-full object-cover transition-transform duration-500 group-hover:scale-110;
    }
    .product-side-overlay {
        @apply absolute inset-0 bg-gradient-to-t from-black/70 to-transparent p-4 flex flex-col justify-end text-white;
    }

    /* Featured Products */
    .product-card-minimal {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
    }
    .featured-image-container {
        @apply relative block overflow-hidden;
    }
    .featured-image {
        @apply transition-transform duration-500 ease-in-out;
    }
    .product-card-minimal:hover .featured-image {
        @apply scale-110;
    }
    .view-product-overlay {
        @apply group-hover:opacity-100;
    }

    /* Flash Sale */
    .flash-sale-image-container {
        @apply relative block overflow-hidden;
    }
    .flash-sale-image {
        @apply transition-transform duration-500 ease-in-out;
    }
    .flash-sale-image-container:hover .flash-sale-image {
        @apply scale-110;
    }
    /* Shine/Flash effect */
    .flash-sale-image-container::after {
        content: '';
        @apply absolute top-0 w-3/4 h-full;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-25deg);
        left: -150%;
        transition: left 0.75s ease-in-out;
    }
    .flash-sale-image-container:hover::after {
        left: 150%;
    }


    /* New Arrivals */
    .new-arrival-card {
        @apply flex flex-col transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
    }

    /* Testimonials */
    .testimonial-card {
        @apply transition-all duration-300 hover:shadow-lg hover:border-blue-200 hover:scale-105;
    }

    /* Categories */
    .category-card-new {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1.5;
    }
    .category-bg-shape {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    }
    .group:hover .category-bg-shape {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    /* Swiper Pagination */
    .swiper-pagination-bullet {
        @apply !bg-white/70;
    }
    .swiper-pagination-bullet-active {
        @apply !bg-white;
    }
}

/* Brands Section Animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.animate-scroll {
    display: flex;
    /* 7 cards visible, 7 hidden for loop. (card_width * num_cards) + (gap * (num_cards - 1)) */
    /* (12rem * 14) + (1rem * 13) = 168rem + 13rem = 181rem */
    /* Using a more flexible approach with calc */
    width: calc(12rem * 14 + 1rem * 14);
    gap: 1rem;
    animation: scroll 40s linear infinite;
}
.animate-scroll:hover {
    animation-play-state: paused;
}
.animate-scroll a {
    flex-shrink: 0;
    width: 12rem; /* w-48 */
    height: 6rem; /* h-24 */
}
