/* Custom styles for AlpeFresh Catalog */

/* Custom button styles with grayscale */
.btn {
    @apply px-4 py-2 rounded shadow transition duration-200 ease-in-out;
}

.btn-primary {
    @apply bg-gray-700 hover:bg-gray-800 text-white;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800;
}

.btn-danger {
    @apply bg-gray-600 hover:bg-gray-700 text-white;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.card-header {
    @apply px-6 py-4 bg-gray-50 border-b border-gray-200;
}

.card-body {
    @apply p-6;
}

.card-footer {
    @apply px-6 py-4 bg-gray-50 border-t border-gray-200;
}

/* Form styles */
.form-group {
    @apply mb-4;
}

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

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500;
}

/* Table styles */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table-header {
    @apply bg-gray-50;
}

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

.table-body {
    @apply bg-white divide-y divide-gray-200;
}

.table-row {
    @apply hover:bg-gray-50;
}

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

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

.alert-success {
    @apply bg-gray-100 text-gray-700 border-l-4 border-gray-500;
}

.alert-danger {
    @apply bg-gray-100 text-gray-700 border-l-4 border-gray-700;
}

/* Badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-gray {
    @apply bg-gray-100 text-gray-800;
}

.badge-dark {
    @apply bg-gray-800 text-white;
}

/* Filter panel styles */
.filter-panel {
    @apply bg-gray-50 p-4 rounded-lg shadow-sm mb-6;
}

/* Product grid */
.product-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6;
}

.product-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:shadow-lg hover:-translate-y-1;
}

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

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

.product-title {
    @apply text-lg font-semibold text-gray-800 mb-2;
}

.product-category {
    @apply text-sm text-gray-500 mb-2;
}

.product-description {
    @apply text-gray-600 text-sm mb-4;
}

/* Admin dashboard styles */
.admin-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.admin-card {
    @apply bg-white rounded-lg shadow-md p-6 border-l-4 border-gray-400;
}

.admin-card-title {
    @apply text-lg font-semibold text-gray-800 mb-2;
}

.admin-card-count {
    @apply text-3xl font-bold text-gray-700 mb-4;
}

/* ===== PREMIUM VARIETIES STYLES ===== */

/* Premium Grid Layout */
.varieties-premium-grid {
    @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8;
}

/* Premium Card */
.variety-premium-card {
    @apply bg-white rounded-3xl shadow-lg border border-gray-100 relative;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    height: 950px; /* Fixed height for all cards */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* No transitions or hover effects */
}

.variety-premium-card:hover {
    /* No hover effects at all */
}

.variety-premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px 24px 0 0;
    /* No animations */
}

/* Image Container */
.variety-image-container {
    @apply relative h-48 overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200;
    margin-top: 4px; /* Account for the top gradient border */
    flex-shrink: 0;
    border-radius: 24px 24px 0 0;
}

.variety-image {
    @apply w-full h-full object-cover;
    /* Ensure square aspect ratio for uploaded images */
    aspect-ratio: 1 / 1;
    filter: brightness(1.05) contrast(1.1) saturate(1.2);
}

.variety-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Removed image container hover effect */

.variety-placeholder {
    @apply w-full h-full flex flex-col items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100;
}

.variety-placeholder-icon {
    @apply mb-3 p-4 bg-white rounded-full shadow-md;
}

.variety-placeholder-text {
    @apply text-gray-500 font-medium text-sm;
}

/* Overlay */
.variety-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0;
}

.variety-badges {
    @apply absolute bottom-4 left-4 flex flex-wrap gap-2;
}

.variety-badge-category {
    @apply inline-block px-3 py-1 text-white text-xs font-bold rounded-full shadow-lg;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
    backdrop-filter: blur(10px);
}

.variety-badge-type {
    @apply inline-block px-3 py-1 bg-black/80 backdrop-blur-sm text-white text-xs font-bold rounded-full shadow-lg;
}

/* Content */
.variety-content {
    @apply p-6 relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 80px; /* Space for fixed button */
}

/* Header */
.variety-header {
    @apply mb-4 relative;
}

.variety-genetics {
    @apply text-xs font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-blue-600 uppercase tracking-widest mb-2;
}

.variety-title {
    @apply text-2xl font-black text-gray-900 leading-tight mb-1;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Description */
.variety-description {
    @apply text-gray-600 text-sm leading-relaxed mb-4;
    max-height: 200px;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Custom scrollbar for description */
.variety-description::-webkit-scrollbar {
    width: 6px;
}

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

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

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

/* Specs */
.variety-specs {
    @apply flex flex-wrap gap-3;
    margin-bottom: 20px;
}

.variety-spec {
    @apply flex flex-col bg-gradient-to-br from-white to-gray-50 rounded-xl px-3 py-2 border border-gray-200 shadow-sm hover:shadow-md transition-all duration-300;
    backdrop-filter: blur(10px);
}

.variety-spec-label {
    @apply text-xs font-bold text-gray-500 uppercase tracking-wide;
}

.variety-spec-value {
    @apply text-sm font-semibold text-gray-800 mt-1;
}

/* CTA Button */
.variety-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    color: white;
    font-weight: bold;
    border-radius: 16px;
    background: #667eea;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 280px;
    text-decoration: none;
}

.variety-cta:hover {
    /* No effects */
    background: #667eea;
}

/* Removed ::before pseudo element to prevent any interference */

/* Empty State */
.empty-state {
    @apply text-center py-20 px-6;
}

.empty-state-icon {
    @apply flex justify-center mb-6;
}

.empty-state-title {
    @apply text-2xl font-black text-gray-800 mb-4;
}

.empty-state-description {
    @apply text-gray-600 max-w-md mx-auto leading-relaxed mb-8;
}

.empty-state-cta {
    @apply inline-flex items-center px-6 py-3 bg-black text-white font-bold rounded-2xl hover:bg-gray-800 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1;
}

/* ===== CATALOG FILTER STYLES ===== */

/* Filter Panel */
.catalog-filter-panel {
    @apply bg-white rounded-3xl shadow-xl p-8 mb-12 border border-gray-100;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.1);
}

.filter-header {
    @apply text-center mb-8;
}

.filter-title {
    @apply text-3xl font-black text-black mb-2;
}

.filter-subtitle {
    @apply text-gray-600 text-lg;
}

/* Filter Form */
.filter-form {
    @apply space-y-8;
}

.filter-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
}

.filter-group {
    @apply space-y-3;
}

.filter-label {
    @apply flex items-center text-sm font-bold text-gray-700 uppercase tracking-wide;
}

.filter-select, .filter-input {
    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-black focus:border-black transition-all duration-300 bg-white;
}

.filter-select:focus, .filter-input:focus {
    @apply shadow-lg transform -translate-y-1;
}

.filter-input::placeholder {
    @apply text-gray-400;
}

/* Filter Actions */
.filter-actions {
    @apply flex flex-col sm:flex-row gap-4 justify-center items-center pt-6 border-t border-gray-100;
}

.filter-btn-primary {
    @apply flex items-center px-8 py-4 bg-black text-white font-bold rounded-2xl hover:bg-gray-800 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1;
}

.filter-btn-secondary {
    @apply flex items-center px-8 py-4 bg-gray-100 text-gray-700 font-bold rounded-2xl hover:bg-gray-200 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-1;
}

/* ===== CATALOG RESULTS STYLES ===== */

.catalog-results {
    @apply space-y-8;
}

.results-header {
    @apply flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8;
}

.results-title {
    @apply text-3xl font-black text-black;
}

.results-count {
    @apply flex items-center gap-2 bg-black text-white px-6 py-3 rounded-2xl shadow-lg;
}

.count-number {
    @apply text-2xl font-black;
}

.count-text {
    @apply text-sm font-medium;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .varieties-premium-grid {
        @apply grid-cols-1 gap-6;
    }
    
    .variety-premium-card {
        @apply rounded-2xl;
        height: 950px; /* Maintain fixed height on mobile */
        /* No hover transforms */
    }
    
    .variety-image-container {
        @apply h-40;
    }
    
    .variety-content {
        @apply p-4;
    }
    
    .variety-title {
        @apply text-xl;
    }
    
    .catalog-filter-panel {
        @apply p-6 rounded-2xl;
    }
    
    .filter-grid {
        @apply grid-cols-1 gap-4;
    }
    
    .filter-title {
        @apply text-2xl;
    }
    
    .filter-actions {
        @apply flex-col;
    }
    
    .results-header {
        @apply flex-col items-start;
    }
    
    .results-title {
        @apply text-2xl;
    }
}

/* Enhanced Shadows and Depth */
/* No animations */

.catalog-filter-panel::before {
    content: '';
    @apply absolute inset-0 rounded-3xl bg-gradient-to-br from-white to-gray-50 opacity-0 transition-opacity duration-300;
    z-index: -1;
}

.catalog-filter-panel:hover::before {
    @apply opacity-100;
}

/* Smooth Animations */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Line Clamp Utility */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== ENHANCED VARIETY CARD DETAILS ===== */

/* Variety Details Grid */
.variety-details-grid {
    @apply grid grid-cols-2 gap-2 mt-4 mb-4 border-t border-gray-100 pt-4;
}

.variety-detail-item {
    @apply flex items-start space-x-1 text-xs;
}

.variety-detail-item svg {
    @apply text-gray-400 mt-0.5 flex-shrink-0;
}

.variety-detail-label {
    @apply font-semibold text-gray-600 mr-1;
}

.variety-detail-value {
    @apply text-gray-800 flex-1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Adjust card height to accommodate new details */
.variety-premium-card {
    @apply bg-white rounded-3xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl relative flex flex-col;
    min-height: 520px;
}

.variety-content {
    @apply p-6 flex flex-col flex-grow;
    padding-bottom: 70px; /* Make room for button */
}

.variety-description {
    @apply text-gray-600 text-sm leading-relaxed mb-3;
    min-height: 2.5rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .variety-details-grid {
        @apply grid-cols-1 gap-1.5;
    }

    .variety-premium-card {
        min-height: auto;
    }
}

/* Hover effect for details */
.variety-premium-card:hover .variety-detail-item svg {
    @apply text-gray-600;
    transition: color 0.3s ease;
}

.variety-premium-card:hover .variety-detail-value {
    @apply text-black;
    transition: color 0.3s ease;
}