/* Custom styles for Stravuj.sk */

/* Base styles */
body {
    font-family: 'Open Sans', sans-serif;
}

/* Custom button styles */
.btn-primary {
    @apply bg-primary hover:bg-primary-dark text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50;
}

.btn-primary:disabled {
    @apply bg-gray-400 hover:bg-gray-400 cursor-not-allowed transform-none;
}

.btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-300;
}

.btn-lg {
    @apply text-lg py-4 px-8;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Custom shadows */
.shadow-soft {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.shadow-medium {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* File upload area styles */
.upload-area {
    transition: all 0.3s ease;
}

.upload-area:hover {
    transform: translateY(-2px);
}

.upload-area.drag-over {
    border-color: #73C208;
    background-color: #f0f9f0;
    transform: scale(1.02);
}

/* Progress bar styles */
.progress-bar {
    background: linear-gradient(90deg, #73C208, #8FD20A);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Card styles */
.recipe-card {
    @apply bg-white rounded-xl shadow-medium p-6 hover:shadow-lg transition-all duration-300;
}

.recipe-card:hover {
    transform: translateY(-4px);
}

/* Responsive typography */
@media (max-width: 768px) {
    .text-5xl {
        @apply text-3xl;
    }
    
    .text-2xl {
        @apply text-xl;
    }
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #73C208;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5A9406;
}

/* Loading spinner */
.loading-spinner {
    border-top-color: #73C208;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Nutrition badge styles */
.nutrition-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.nutrition-badge.protein {
    @apply bg-red-100 text-red-800;
}

.nutrition-badge.carbs {
    @apply bg-yellow-100 text-yellow-800;
}

.nutrition-badge.fat {
    @apply bg-blue-100 text-blue-800;
}

/* Exercise difficulty indicators */
.difficulty-easy {
    @apply bg-green-100 text-green-800;
}

.difficulty-medium {
    @apply bg-yellow-100 text-yellow-800;
}

.difficulty-hard {
    @apply bg-red-100 text-red-800;
}

/* Interactive elements */
.interactive-card {
    @apply cursor-pointer transition-all duration-200;
}

.interactive-card:hover {
    @apply shadow-lg transform scale-105;
}

/* Alert styles */
.alert {
    @apply rounded-lg px-4 py-3 mb-4;
}

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

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

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

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

/* Form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors;
}

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

/* Hero gradient background */
.hero-bg {
    background: linear-gradient(135deg, #f0f9f0 0%, #ffffff 100%);
}



/* Feature icons */
.feature-icon {
    @apply w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-primary text-xl;
}

/* Responsive grid adjustments */
@media (max-width: 640px) {
    .grid-cols-4 {
        @apply grid-cols-2;
    }
    
    .md\:grid-cols-2 {
        @apply grid-cols-1;
    }
    
    .md\:grid-cols-3 {
        @apply grid-cols-1;
    }
}

/* Print styles for PDF generation */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
    
    .print-break-avoid {
        page-break-inside: avoid;
    }
}