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

/* Custom Utilities Layer */
@layer utilities {
    /* 🎨 Catégories de confessions - Styles personnalisés avec priorité maximale */

    /* ❤️‍🔥 Amour & Relations */
    .category-love {
        background: linear-gradient(135deg, #f43f5e, #ec4899) !important;
        color: white !important;
        border: 2px solid #f43f5e !important;
    }

    .category-love-header {
        background: linear-gradient(135deg, #f43f5e22, #ec4899) !important;
        border-bottom: 3px solid #f43f5e !important;
    }

    /* 🔥 Sexualité */
    .category-sexuality {
        background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
        color: white !important;
        border: 2px solid #f59e0b !important;
    }

    .category-sexuality-header {
        background: linear-gradient(135deg, #f59e0b22, #ea580c) !important;
        border-bottom: 3px solid #f59e0b !important;
    }

    /* 💜 Confessions intimes */
    .category-intimate-confessions {
        background: linear-gradient(135deg, #9333ea, #581c87) !important;
        color: white !important;
        border: 2px solid #9333ea !important;
    }

    .category-intimate-confessions-header {
        background: linear-gradient(135deg, #9333ea22, #581c87) !important;
        border-bottom: 3px solid #9333ea !important;
    }

    /* 🌟 Rêves et Aspirations */
    .category-dreams-aspirations {
        background: linear-gradient(135deg, #6366f1, #2563eb) !important;
        color: white !important;
        border: 2px solid #6366f1 !important;
    }

    .category-dreams-aspirations-header {
        background: linear-gradient(135deg, #6366f122, #2563eb) !important;
        border-bottom: 3px solid #6366f1 !important;
    }

    /* 🌸 Relations Familiales */
    .category-family-relationships {
        background: linear-gradient(135deg, #f9a8d4, #fb7185) !important;
        color: white !important;
        border: 2px solid #f9a8d4 !important;
    }

    .category-family-relationships-header {
        background: linear-gradient(135deg, #f9a8d422, #fb7185) !important;
        border-bottom: 3px solid #f9a8d4 !important;
    }

    /* 🖤 Secrets Sombres */
    .category-dark-secrets {
        background: linear-gradient(135deg, #374151, #111827) !important;
        color: white !important;
        border: 2px solid #374151 !important;
    }

    .category-dark-secrets-header {
        background: linear-gradient(135deg, #37415122, #111827) !important;
        border-bottom: 3px solid #374151 !important;
    }

    /* 💼 Travail et Carrière */
    .category-work {
        background: linear-gradient(135deg, #2563eb, #1e40af) !important;
        color: white !important;
        border: 2px solid #2563eb !important;
    }

    .category-work-header {
        background: linear-gradient(135deg, #2563eb22, #1e40af) !important;
        border-bottom: 3px solid #2563eb !important;
    }

    /* 😡 Colère et Frustrations */
    .category-anger-frustrations {
        background: linear-gradient(135deg, #b91c1c, #7f1d1d) !important;
        color: white !important;
        border: 2px solid #b91c1c !important;
    }

    .category-anger-frustrations-header {
        background: linear-gradient(135deg, #b9131722, #7f1d1d) !important;
        border-bottom: 3px solid #b91c1c !important;
    }

    /* 🌑 Vie Personnelle Cachée */
    .category-hidden-personal-life {
        background: linear-gradient(135deg, #1f2937, #000000) !important;
        color: white !important;
        border: 2px solid #1f2937 !important;
    }

    .category-hidden-personal-life-header {
        background: linear-gradient(135deg, #1f293722, #000000) !important;
        border-bottom: 3px solid #1f2937 !important;
    }

    /* 💚 Finances et Argent */
    .category-finances-money {
        background: linear-gradient(135deg, #059669, #15803d) !important;
        color: white !important;
        border: 2px solid #059669 !important;
    }

    .category-finances-money-header {
        background: linear-gradient(135deg, #059f6922, #15803d) !important;
        border-bottom: 3px solid #059669 !important;
    }

    /* 🎭 Identité et Image de Soi */
    .category-identity-self-image {
        background: linear-gradient(135deg, #06b6d4, #2563eb) !important;
        color: white !important;
        border: 2px solid #06b6d4 !important;
    }

    .category-identity-self-image-header {
        background: linear-gradient(135deg, #06b6d422, #2563eb) !important;
        border-bottom: 3px solid #06b6d4 !important;
    }

    /* 🧠 Santé Mentale */
    .category-mental-health {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
        color: white !important;
        border: 2px solid #8b5cf6 !important;
    }

    .category-mental-health-header {
        background: linear-gradient(135deg, #8b5cf622, #7c3aed) !important;
        border-bottom: 3px solid #8b5cf6 !important;
    }

    /* 🎓 Éducation et Apprentissage */
    .category-education-learning {
        background: linear-gradient(135deg, #0891b2, #0e7490) !important;
        color: white !important;
        border: 2px solid #0891b2 !important;
    }

    .category-education-learning-header {
        background: linear-gradient(135deg, #0891b222, #0e7490) !important;
        border-bottom: 3px solid #0891b2 !important;
    }

    /* 👥 Amitiés et Relations Sociales */
    .category-friendship-social {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        color: white !important;
        border: 2px solid #f59e0b !important;
    }

    .category-friendship-social-header {
        background: linear-gradient(135deg, #f59e0b22, #d97706) !important;
        border-bottom: 3px solid #f59e0b !important;
    }

    /* 🏠 Habitudes et Mode de Vie */
    .category-habits-lifestyle {
        background: linear-gradient(135deg, #10b981, #047857) !important;
        color: white !important;
        border: 2px solid #10b981 !important;
    }

    .category-habits-lifestyle-header {
        background: linear-gradient(135deg, #10b98122, #047857) !important;
        border-bottom: 3px solid #10b981 !important;
    }

    /* 😈 Plaisirs Coupables */
    .category-guilty-pleasures {
        background: linear-gradient(135deg, #e11d48, #be185d) !important;
        color: white !important;
        border: 2px solid #e11d48 !important;
    }

    .category-guilty-pleasures-header {
        background: linear-gradient(135deg, #e11d4822, #be185d) !important;
        border-bottom: 3px solid #e11d48 !important;
    }

    /* 🌍 Autres et catégories manquantes */
    .category-other {
        background: linear-gradient(135deg, #6b7280, #4b5563) !important;
        color: white !important;
        border: 2px solid #6b7280 !important;
    }

    .category-other-header {
        background: linear-gradient(135deg, #6b728022, #4b5563) !important;
        border-bottom: 3px solid #6b7280 !important;
    }

    /* 🤐 Secrets */
    .category-secrets {
        background: linear-gradient(135deg, #374151, #111827) !important;
        color: white !important;
        border: 2px solid #374151 !important;
    }

    .category-secrets-header {
        background: linear-gradient(135deg, #37415122, #111827) !important;
        border-bottom: 3px solid #374151 !important;
    }

    /* 😔 Regrets */
    .category-regrets {
        background: linear-gradient(135deg, #7c2d12, #451a03) !important;
        color: white !important;
        border: 2px solid #7c2d12 !important;
    }

    .category-regrets-header {
        background: linear-gradient(135deg, #7c2d1222, #451a03) !important;
        border-bottom: 3px solid #7c2d12 !important;
    }

    /* 🏳️‍🌈 LGBTQ+ */
    .category-lgbtq {
        background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
        color: white !important;
        border: 2px solid #ec4899 !important;
    }

    .category-lgbtq-header {
        background: linear-gradient(135deg, #ec489922, #8b5cf6) !important;
        border-bottom: 3px solid #ec4899 !important;
    }

    /* 💔 Infidelity */
    .category-infidelity {
        background: linear-gradient(135deg, #b91c1c, #7f1d1d) !important;
        color: white !important;
        border: 2px solid #b91c1c !important;
    }

    .category-infidelity-header {
        background: linear-gradient(135deg, #b91c1c22, #7f1d1d) !important;
        border-bottom: 3px solid #b91c1c !important;
    }

    /* 🌟 First Time */
    .category-first-time {
        background: linear-gradient(135deg, #059669, #15803d) !important;
        color: white !important;
        border: 2px solid #059669 !important;
    }

    .category-first-time-header {
        background: linear-gradient(135deg, #05966922, #15803d) !important;
        border-bottom: 3px solid #059669 !important;
    }

    /* ❤️ Desire */
    .category-desire {
        background: linear-gradient(135deg, #dc2626, #991b1b) !important;
        color: white !important;
        border: 2px solid #dc2626 !important;
    }

    .category-desire-header {
        background: linear-gradient(135deg, #dc262622, #991b1b) !important;
        border-bottom: 3px solid #dc2626 !important;
    }

    /* 💊 Addiction */
    .category-addiction {
        background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
        color: white !important;
        border: 2px solid #7c3aed !important;
    }

    .category-addiction-header {
        background: linear-gradient(135deg, #7c3aed22, #5b21b6) !important;
        border-bottom: 3px solid #7c3aed !important;
    }

    /* ⚠️ Abuse */
    .category-abuse {
        background: linear-gradient(135deg, #991b1b, #7f1d1d) !important;
        color: white !important;
        border: 2px solid #991b1b !important;
    }

    .category-abuse-header {
        background: linear-gradient(135deg, #991b1b22, #7f1d1d) !important;
        border-bottom: 3px solid #991b1b !important;
    }

    /* 🌈 Coming Out */
    .category-coming-out {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        color: white !important;
        border: 2px solid #f59e0b !important;
    }

    .category-coming-out-header {
        background: linear-gradient(135deg, #f59e0b22, #d97706) !important;
        border-bottom: 3px solid #f59e0b !important;
    }

    /* 🔥 Kinks & Fantasies */
    .category-kinks-fantasies {
        background: linear-gradient(135deg, #be185d, #9f1239) !important;
        color: white !important;
        border: 2px solid #be185d !important;
    }

    .category-kinks-fantasies-header {
        background: linear-gradient(135deg, #be185d22, #9f1239) !important;
        border-bottom: 3px solid #be185d !important;
    }

    /* 👥 Friends */
    .category-friends {
        background: linear-gradient(135deg, #0891b2, #0e7490) !important;
        color: white !important;
        border: 2px solid #0891b2 !important;
    }

    .category-friends-header {
        background: linear-gradient(135deg, #0891b222, #0e7490) !important;
        border-bottom: 3px solid #0891b2 !important;
    }

    /* 👨‍👩‍👧‍👦 Family */
    .category-family {
        background: linear-gradient(135deg, #f9a8d4, #fb7185) !important;
        color: white !important;
        border: 2px solid #f9a8d4 !important;
    }

    .category-family-header {
        background: linear-gradient(135deg, #f9a8d422, #fb7185) !important;
        border-bottom: 3px solid #f9a8d4 !important;
    }

    /* 🎓 School */
    .category-school {
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        color: white !important;
        border: 2px solid #2563eb !important;
    }

    .category-school-header {
        background: linear-gradient(135deg, #2563eb22, #1d4ed8) !important;
        border-bottom: 3px solid #2563eb !important;
    }

    /* 🎯 Catégorie par défaut */
    .category-default {
        background: linear-gradient(135deg, #9ca3af, #6b7280) !important;
        color: white !important;
        border: 2px solid #9ca3af !important;
    }

    .category-default-header {
        background: linear-gradient(135deg, #9ca3af22, #6b7280) !important;
        border-bottom: 3px solid #9ca3af !important;
    }

    /* 🎨 Classes utilitaires d'animation */
    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards !important;
    }

    .animate-fade-in-delay {
        animation: fadeInUp 0.8s ease-out 0.2s both !important;
    }

    .animate-fade-in-delay-2 {
        animation: fadeInUp 0.8s ease-out 0.4s both !important;
    }

    .animate-shimmer {
        animation: shimmer 2s linear infinite !important;
    }

    /* 🎨 Animations keyframes */
    @keyframes fadeInUp {
        from {
            opacity: 0 !important;
            transform: translateY(30px) !important;
        }
        to {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
    }

    @keyframes shimmer {
        from {
            transform: translateX(-100%) !important;
        }
        to {
            transform: translateX(100%) !important;
        }
    }
}