@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

@layer base {
    body {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        color: #333;
    }
}

@layer components {
    /* Navigation Styles */
    .nav-container {
        @apply bg-white shadow-md;
    }

    .nav-link {
        @apply text-gray-700 hover:text-primary transition-colors duration-200 px-4 py-2;
    }

    .mega-menu {
        @apply absolute left-0 w-full bg-white shadow-lg border-t-4 border-white hidden group-hover:block z-50;
        max-height: 700px;
        overflow-y: auto;
    }

    .mega-menu-container {
        @apply max-w-7xl mx-auto px-5;
    }

    /* Button Styles */
    .btn-primary {
        @apply bg-primary text-white px-6 py-2 rounded hover:bg-primary-dark transition-colors duration-200;
    }

    .btn-secondary {
        @apply bg-secondary text-gray-700 px-6 py-2 rounded hover:bg-secondary-dark transition-colors duration-200;
    }

    /* Cart Button */
    .block-cart {
        @apply flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded hover:bg-gray-50 transition-colors;
    }

    /* Product Card */
    .product-card {
        @apply bg-white rounded-lg shadow hover:shadow-lg transition-shadow duration-200 p-4;
    }

    /* Submenu Items */
    .submenu-item {
        @apply inline-block bg-gray-100 rounded-full px-4 py-1 text-sm hover:bg-gray-200 hover:font-semibold transition-all;
    }

    /* Custom Scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
        width: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-gray-100 rounded-full;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-gray-400 rounded-full;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-500;
    }
}

@layer utilities {
    .sticky-nav {
        @apply fixed top-0 left-0 right-0 z-40;
    }
}