/* Custom styles for 3D Print Store */

/* Base styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    @apply antialiased text-gray-800;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    @apply font-bold leading-tight tracking-tight;
}

h1 { @apply text-4xl md:text-5xl; }
h2 { @apply text-3xl md:text-4xl; }
h3 { @apply text-2xl md:text-3xl; }
h4 { @apply text-xl md:text-2xl; }
h5 { @apply text-lg md:text-xl; }

/* Buttons */
.btn {
    @apply inline-flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
}

.btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
}

.btn-secondary {
    @apply bg-white text-indigo-600 border border-indigo-600 hover:bg-indigo-50 focus:ring-indigo-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-outline {
    @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-indigo-500;
}

/* Forms */
.form-input,
.form-select,
.form-textarea {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Alerts */
.alert {
    @apply p-4 rounded-lg text-sm;
}

.alert-success {
    @apply bg-green-100 text-green-700;
}

.alert-error {
    @apply bg-red-100 text-red-700;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-700;
}

.alert-info {
    @apply bg-blue-100 text-blue-700;
}

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

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

.product-card .product-info {
    @apply p-4;
}

.product-card .product-title {
    @apply text-lg font-semibold text-gray-900 mb-1 truncate;
}

.product-card .product-price {
    @apply text-lg font-bold text-indigo-600;
}

.product-card .product-rating {
    @apply flex items-center text-yellow-400 text-sm mt-1;
}

/* Cart styles */
.cart-item {
    @apply flex py-4 border-b border-gray-200;
}

.cart-item:last-child {
    @apply border-b-0;
}

.cart-item-image {
    @apply flex-shrink-0 w-24 h-24 rounded-md overflow-hidden bg-gray-200;
}

.cart-item-image img {
    @apply w-full h-full object-cover;
}

/* Checkout form */
.checkout-form {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

/* Loading spinner */
.loading-spinner {
    @apply animate-spin rounded-full border-4 border-t-4 border-gray-200 h-12 w-12;
    border-top-color: #4f46e5;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

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

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

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .checkout-form {
        @apply grid-cols-1;
    }
    
    .cart-item {
        @apply flex-col;
    }
    
    .cart-item-image {
        @apply w-full h-32 mb-4;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12px;
    }
    
    @page {
        margin: 1cm;
    }
}