/* Custom styles */
.product-card {
    @apply bg-white overflow-hidden shadow rounded-lg transition-transform duration-200 hover:transform hover:scale-105;
}

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

.product-card-content {
    @apply p-5;
}

.product-card-title {
    @apply text-lg font-medium text-gray-900 mb-2;
}

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

.product-card-description {
    @apply mt-2 text-sm text-gray-500;
}

.btn-primary {
    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200;
}

.btn-secondary {
    @apply inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200;
}

/* Form Input Styles */
.form-input {
    @apply block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-colors duration-200 px-3 py-2 bg-white;
}

.form-input:focus {
    @apply outline-none ring-2 ring-indigo-500 ring-opacity-50;
}

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

/* Cart Styles */
.cart-item {
    @apply flex items-center justify-between py-4 border-b border-gray-200;
}

.cart-item-image {
    @apply h-20 w-20 object-cover rounded-md;
}

.cart-item-details {
    @apply ml-4 flex-1;
}

.cart-item-title {
    @apply text-lg font-medium text-gray-900;
}

.cart-item-price {
    @apply text-lg font-medium text-indigo-600;
}

.cart-summary {
    @apply bg-white shadow rounded-lg p-6 mt-6;
}

.cart-total {
    @apply text-2xl font-bold text-gray-900;
}

/* Alert Styles */
.alert {
    @apply p-4 mb-4 rounded-md;
}

.alert-success {
    @apply bg-green-50 text-green-800;
}

.alert-error {
    @apply bg-red-50 text-red-800;
}

/* Loading spinner */
.spinner {
    @apply animate-spin h-5 w-5 text-indigo-600;
}

/* Responsive tables */
.table-container {
    @apply overflow-x-auto;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
}

/* Status badges */
.status-badge {
    @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800;
}

.status-completed {
    @apply bg-green-100 text-green-800;
}

.status-cancelled {
    @apply bg-red-100 text-red-800;
}

/* Affiliate stats cards */
.stats-card {
    @apply bg-white overflow-hidden shadow rounded-lg;
}

.stats-card-header {
    @apply px-4 py-5 sm:px-6;
}

.stats-card-body {
    @apply px-4 py-5 sm:p-6;
}

.stats-value {
    @apply text-3xl font-bold text-gray-900;
}

.stats-label {
    @apply text-sm font-medium text-gray-500;
}

/* Modal Styles */
.modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
}

.modal-content {
    @apply inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6;
}

/* Navigation Styles */
.nav-link {
    @apply border-transparent text-gray-500 hover:border-indigo-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200;
}

.nav-link-active {
    @apply border-indigo-500 text-gray-900;
}

/* Responsive Design */
@media (max-width: 640px) {
    .product-grid {
        @apply grid-cols-1 gap-4;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .product-grid {
        @apply grid-cols-2 gap-4;
    }
}

@media (min-width: 1025px) {
    .product-grid {
        @apply grid-cols-3 gap-4;
    }
}