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

/* Custom Styles */
body {
    font-family: 'Tajawal', sans-serif;
    background-color: #f8fafc;
}

/* Header Styles */
.custom-header {
    @apply bg-white shadow-md py-4 px-6 flex justify-between items-center fixed top-0 left-0 right-0 z-50;
}

.logo {
    @apply flex items-center;
}

.logo-text {
    @apply text-xl font-bold text-orange-600 ml-2;
}

/* Navigation Styles */
.nav-item {
    @apply flex flex-col items-center justify-center text-gray-600;
}

.nav-item.active {
    @apply text-orange-600;
}

.nav-icon {
    @apply w-6 h-6;
}

/* Product Card Styles */
.product-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 hover:shadow-md;
}

.product-image {
    @apply w-full h-48 object-cover;
}

.product-title {
    @apply font-bold text-gray-800 text-lg mb-1;
}

.product-price {
    @apply text-orange-600 font-bold text-xl;
}

.product-old-price {
    @apply text-gray-400 line-through text-sm;
}

/* Vendor Card Styles */
.vendor-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 hover:shadow-md;
}

.vendor-image {
    @apply w-20 h-20 rounded-full object-cover border-2 border-orange-200;
}

.vendor-name {
    @apply font-bold text-gray-800 text-lg mb-1;
}

/* Button Styles */
.btn-primary {
    @apply bg-orange-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-orange-700 transition duration-300;
}

.btn-outline {
    @apply border border-orange-600 text-orange-600 px-6 py-2 rounded-lg font-medium hover:bg-orange-50 transition duration-300;
}

/* Form Styles */
.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .logo-text {
        @apply text-lg;
    }
    
    .nav-icon {
        @apply w-5 h-5;
    }
}

/* Animation for PWA Install Banner */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.pwa-banner {
    animation: slideUp 0.3s ease-out;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        @apply bg-gray-900 text-gray-100;
    }
    
    .product-card, .vendor-card {
        @apply bg-gray-800;
    }
    
    .product-title, .vendor-name {
        @apply text-gray-100;
    }
}