/* OCKA - Tailwind CSS */
:root {
  --ocka-orange: #f97316;
  --ocka-orange-dark: #ea580c;
  --ocka-orange-light: #fed7aa;
  --ocka-gray: #374151;
  --ocka-gray-light: #f3f4f6;
}

/* Utility classes for line clamping */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

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

/* Smooth transitions */
.transition-all {
  transition: all 0.3s ease;
}

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

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

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

::-webkit-scrollbar-thumb:hover {
  background: #ea580c;
}

/* Tailwind Base Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Components */
@layer components {
  .btn-primary {
    @apply bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-lg transition duration-300;
  }
  
  .btn-secondary {
    @apply bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg transition duration-300;
  }
  
  .btn-outline {
    @apply border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white font-semibold py-3 px-6 rounded-lg transition duration-300;
  }
  
  .card {
    @apply bg-white rounded-2xl shadow-lg overflow-hidden;
  }
  
  .input-field {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-300;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  .hero-gradient {
    @apply bg-gradient-to-br from-orange-500 to-orange-600;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-orange-500 to-orange-600 bg-clip-text text-transparent;
  }
}

/* Responsive Design */
@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
  
  .text-5xl {
    @apply text-3xl;
  }
  
  .text-4xl {
    @apply text-2xl;
  }
  
  .text-3xl {
    @apply text-xl;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-break {
    page-break-before: always;
  }
}