@import "tailwindcss";

/* Custom styles for mobile-first design */
@layer base {
  /* Ensure proper viewport behavior on mobile */
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Better focus styles for accessibility */
  *:focus {
    outline: none;
  }
  
  /* Custom scrollbar for webkit browsers */
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}

@layer components {
  /* Custom button styles */
  .btn-primary {
    @apply bg-gradient-to-r from-[#6C8738] to-[#EBCE5A] text-white px-4 py-2 rounded-xl font-medium hover:from-[#5e7632] hover:to-[#d9be54] transition-all duration-200 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-[#6C8738];
  }
  
  .btn-secondary {
    @apply bg-slate-100 text-slate-700 px-4 py-2 rounded-xl font-medium hover:bg-slate-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-500;
  }
  
  /* Card styles */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-white/20 hover:shadow-md transition-all duration-200;
  }
  
  /* Input styles */
  .input-field {
    @apply w-full p-4 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#6C8738] focus:border-transparent transition-all duration-200 bg-slate-50 focus:bg-white;
  }
  
  /* Gradient text */
  .gradient-text {
    @apply bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent;
  }
  
  /* Location autocomplete dropdown styles */
  .location-autocomplete-dropdown {
    @apply absolute z-10 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-48 overflow-y-auto;
    animation: slideDown 0.2s ease-out;
  }
  
  .location-option {
    @apply px-4 py-3 text-sm text-slate-700 hover:bg-[#EBCE5A]/30 hover:text-[#6C8738] cursor-pointer transition-colors duration-150 border-b border-slate-100 last:border-b-0;
  }
  
  .location-option:hover {
    @apply bg-[#EBCE5A]/30 text-[#6C8738];
  }
  
  .location-option:active {
    @apply bg-[#EBCE5A]/50;
  }
}

@layer utilities {
  /* Safe area padding for mobile devices */
  .safe-area-padding {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* Glass morphism effect */
  .glass {
    @apply bg-white/80 backdrop-blur-sm border border-white/20;
  }
  
  /* Custom animations */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Mobile-specific optimizations */
@media (max-width: 640px) {
  /* Ensure bottom navigation doesn't overlap content */
  .pb-safe {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
  
  /* Optimize touch targets */
  button, a, input, select, textarea {
    min-height: 44px;
  }
  
  /* Better spacing on mobile */
  .mobile-spacing {
    @apply px-4 py-6;
  }
  
  /* Enhanced dropdown for mobile */
  .location-option {
    @apply py-4; /* Larger touch targets on mobile */
  }
}