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

/* Toast Notification Styles */
@layer components {
  .toast-notification {
    @apply fixed bottom-4 right-4 bg-white rounded-lg shadow-lg border border-gray-200 p-4 z-[99999] transform translate-x-full transition-transform duration-300 min-w-[280px] max-w-[400px];
  }
  
  .toast-notification.show {
    @apply translate-x-0;
  }
  
  .toast-notification .toast-icon {
    @apply flex-shrink-0 text-lg;
  }
  
  .toast-notification.success .toast-icon {
    @apply text-green-600;
  }
  
  .toast-notification.error .toast-icon {
    @apply text-red-600;
  }
  
  .toast-notification.warning .toast-icon {
    @apply text-yellow-600;
  }
  
  .toast-notification.info .toast-icon {
    @apply text-blue-600;
  }
  
  .toast-notification .toast-content {
    @apply flex items-center space-x-3;
  }
  
  .toast-notification .toast-text {
    @apply flex-1 text-sm font-medium text-gray-900;
  }
  
  .toast-notification .toast-close {
    @apply flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors p-1 hover:bg-gray-100 rounded;
  }
}

/* Step Circle Hover Effects */
@layer utilities {
  #step-1-circle:hover,
  #step-2-circle:hover,
  #step-3-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.5), 0 8px 10px -6px rgba(59, 130, 246, 0.5);
  }
  
  /* Mavi Gradient Butonlar (Devam Et, Kart Bilgileri) */
  #step-1-next:hover,
  #step-2-next:hover {
    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.4), 0 10px 10px -5px rgba(59, 130, 246, 0.3);
    filter: brightness(1.1);
  }
  
  /* Yeşil Gradient Buton (Ödemeyi Tamamla) */
  #start-payment:hover {
    box-shadow: 0 20px 25px -5px rgba(34, 197, 94, 0.4), 0 10px 10px -5px rgba(34, 197, 94, 0.3);
    filter: brightness(1.1);
  }
  
  /* Gri Geri Butonları */
  #step-2-back:hover,
  #step-3-back:hover {
    background-color: rgb(229, 231, 235);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }
  
  /* Tüm butonlar için smooth transition */
  #step-1-next,
  #step-2-next,
  #step-2-back,
  #step-3-back,
  #start-payment {
    transition: all 0.3s ease;
  }
}

/* Mobil Dashboard Header Stilleri */
@layer components {
  /* Mobil logo bölgesi - mavi gradyan */
  @media (max-width: 1023px) {
    .mobile-dashboard-logo {
      background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    }

    /* Detay barı wrapper - mobilde beyaz */
    .detail-bar-wrapper {
      background: white !important;
    }
  }
}

/* Custom styles can be added here */