@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-inter bg-neutral text-dark;
  }
}

@layer components {
  .container {
    @apply w-[90%] max-w-7xl mx-auto px-4;
  }
  
  .btn-primary {
    @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
  }
  
  .btn-secondary {
    @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
  }
  
  .calculator-card {
    @apply card h-full flex flex-col;
  }
  
  .calculator-form {
    @apply space-y-4 w-full max-w-2xl mx-auto;
  }
  
  .calculator-form input,
  .calculator-form select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none;
  }
  
  /* Custom select styles with consistent dropdown arrow */
  .custom-select {
    @apply relative;
  }
  
  .custom-select select {
    @apply w-full appearance-none bg-white cursor-pointer;
  }
  
  .custom-select::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    @apply absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none;
  }
  
  .calculator-form label {
    @apply font-medium text-dark;
  }
  
  .result {
    @apply mt-6 p-6 bg-green-50 border-l-4 border-secondary rounded-lg text-center;
  }
  
  .category-tag {
    @apply px-4 py-2 bg-gray-200 hover:bg-primary hover:text-white text-dark rounded-full cursor-pointer transition-all duration-300;
  }
  
  .category-tag.active {
    @apply bg-primary text-white;
  }
  
  .footer-link {
    @apply text-gray-400 hover:text-white transition-colors duration-300;
  }
}