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

/* Styles globaux de base */
@layer base {
    body {
        @apply antialiased text-gray-800;
    }
}

/* Composants communs */
@layer components {
    .btn {
        @apply px-4 py-2 rounded-lg transition-all duration-300;
    }

    .btn-primary {
        @apply bg-gradient-to-r from-green-600 to-yellow-500 text-white 
               hover:from-green-700 hover:to-yellow-600;
    }

    .gradient-text {
        @apply bg-gradient-to-r from-green-600 to-yellow-500 bg-clip-text text-transparent;
    }
}

/* Utilitaires personnalisés */
@layer utilities {
    .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
}

/* Styles globaux */
@layer components {
  /* Styles communs */
}

/* Styles spécifiques au panier */
@layer components {
  .cart-sidebar-overlay {
    @apply fixed inset-0 bg-black/40 backdrop-blur-sm transition-all duration-500 ease-in-out opacity-0 pointer-events-none;
  }

  .cart-sidebar-container {
    @apply pointer-events-auto w-full lg:w-[28rem] h-full transform transition-transform duration-500 ease-in-out translate-x-full bg-white shadow-xl;
  }

  .cart-sidebar-header {
    @apply flex-shrink-0 px-4 py-6 sm:px-6 bg-white;
  }
}

/* Styles spécifiques aux produits */
@layer components {
  /* Styles pour l'app product */
}

/* Ajouter ces styles pour l'animation apres ajout au panier*/
@keyframes slideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification-enter {
    animation: slideIn 0.3s ease-out forwards;
}

.notification-exit {
    animation: slideOut 0.3s ease-in forwards;
}

.scale-enter {
    animation: scaleIn 0.2s ease-out forwards;
}

@keyframes scaleIn {
    0% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}