@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;

html, body {
    @apply max-w-full;
    @apply text-base;
    @apply text-gray-900;
}

@layer base {
    h1, .h1 {
        @apply text-lg; 
        @apply font-semibold;
        @apply text-gray-900;
    }

    a {
        @apply font-medium;
        @apply text-yellow-900;
    }
}

@layer components {
    .badge-red {
        @apply text-xs;
        @apply font-medium;
        @apply px-1;
        @apply py-0.5;
        @apply rounded;
        @apply bg-red-300;
        @apply text-red-900;
    }

    .badge-yellow {
        @apply text-xs;
        @apply font-medium;
        @apply px-1;
        @apply py-0.5;
        @apply rounded;
        @apply bg-yellow-300;
        @apply text-yellow-900;
    }

    .form-label {
        @apply text-sm;
        @apply mb-1;
        @apply block;
    }

    .form-input {
        @apply p-3;
        @apply rounded;
        @apply border;
        @apply border-gray-300;
        @apply bg-transparent;
        @apply w-full;
        @apply leading-none;
    }

    .btn-primary {
        @apply p-3;
        @apply bg-yellow-900;
        @apply border-yellow-900;
        @apply rounded;
        @apply border;
        @apply text-white;
        @apply text-center;
        @apply disabled:bg-yellow-700;
        @apply disabled:border-yellow-700;
    }

    .btn-light {
        @apply p-3;
        @apply bg-gray-100;
        @apply border-gray-300;
        @apply rounded;
        @apply border;
        @apply text-gray-900;
        @apply text-center;
    }

    .product-card {
        @apply w-full;
        @apply h-full;
        @apply border;
        @apply border-gray-300;
        @apply rounded;
        @apply relative;
        @apply flex;
        @apply flex-col;
    }

    .product-card__image {
        @apply w-full;
        @apply h-[160px];
        @apply object-contain;
        @apply object-center;
        @apply border-b;
        @apply border-gray-300;
    }

    .product-card__description {
        @apply p-2;
        @apply pb-3;
        @apply flex;
        @apply flex-col;
        @apply flex-1;
        @apply justify-between;
    }

    .product-card__title {
        @apply text-sm;
        @apply text-gray-900;
    }

    .product-card__brand {
        @apply text-sm;
    }
}

@layer utilities {
    .wrap-line-ellipsis-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .wrap-line-ellipsis-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.menu-wrapper {
    @apply fixed;
    @apply top-0;
    @apply left-0;
    @apply bg-white;
    @apply w-[85%];
    @apply h-full;
    @apply z-[60];
    @apply py-4;
    @apply px-4;
    @apply overflow-y-auto;
    @apply translate-x-[-100%];
    @apply ease-linear;
    @apply duration-150;
}

.menu-wrapper.active{
    @apply translate-x-0;
}

.menu-overlay {
    @apply fixed;
    @apply top-0;
    @apply left-0;
    @apply w-full;
    @apply h-full;
    @apply z-[55];
    @apply bg-gray-900/60;
}

.sticky-header {
    @apply px-4; 
    @apply py-3;
    @apply bg-white;
    @apply border-b;
    @apply sticky;
    @apply top-0;
    @apply shadow;
    @apply z-50;
}

.content-container {
    @apply max-w-full;
    @apply overflow-x-hidden;
}

#indoteknik_toast {
    @apply fixed;
    @apply bottom-4;
    @apply translate-y-[200%];
    @apply left-[50%];
    @apply translate-x-[-50%];
    @apply z-[100];
    @apply flex;
    @apply items-center;
    @apply p-4;
    @apply mb-4;
    @apply w-[90%];
    @apply text-gray-500;
    @apply bg-white;
    @apply border;
    @apply border-gray-300;
    @apply rounded-lg;
    @apply shadow;
    @apply ease-linear;
    @apply duration-300;
}

#indoteknik_toast.active {
    @apply translate-y-0;
}

.category-menu {
    @apply hidden;
}

.swiper-slide {
    @apply !h-auto;
}

.lazy-load-image-background {
    @apply !block;
}