/* Styles pour l'indicateur de type de profil réutilisable */

/* Base commune */
.profile-type-indicator {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    transition: all 0.2s ease;
}

/* Tailles */
.profile-type-indicator.profile-type-small {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.profile-type-indicator.profile-type-medium {
    width: 32px;
    height: 32px;
    font-size: 16px;
}

.profile-type-indicator.profile-type-large {
    width: 44px;
    height: 44px;
    font-size: 20px;
}

/* Types spécifiques */
.profile-type-indicator.type-homme {
    color: #3498db;
}

.profile-type-indicator.type-homme-gay {
    background: linear-gradient(135deg, #ff0000, #ff8c00, #ffff00, #00ff00, #0000ff, #8b00ff);
    color: white;
}

.profile-type-indicator.type-femme {
    color: #e91e63;
}

.profile-type-indicator.type-femme-gay {
    background: linear-gradient(135deg, #ff0000, #ff8c00, #ffff00, #00ff00, #0000ff, #8b00ff);
    color: white;
}

.profile-type-indicator.type-couple {
    color: #ff4081;
}

.profile-type-indicator.type-trans {
    color: #9c27b0;
}

.profile-type-indicator.type-travesti {
    color: #673ab7;
}

.profile-type-indicator.type-nonbinaire {
    color: #795548;
}

/* Hover effect */
.profile-type-indicator:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Mode sombre */
[data-bs-theme="dark"] .profile-type-indicator {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

[data-bs-theme="dark"] .profile-type-indicator.type-homme-gay,
[data-bs-theme="dark"] .profile-type-indicator.type-femme-gay {
    background: linear-gradient(135deg, #ff0000, #ff8c00, #ffff00, #00ff00, #0000ff, #8b00ff);
}

/* Contextes spécifiques pour ajuster la position */

/* Dans les listes d'utilisateurs */
.user-grid .profile-type-indicator {
    top: 4px;
    right: 4px;
    left: auto;
}

/* Dans les cartes de posts */
.post-card .media .profile-type-indicator {
    top: -2px;
    right: -2px;
    left: auto;
}

/* Dans les listes d'événements */
.attendee-item .profile-type-indicator {
    top: 2px;
    left: 2px;
}

/* Dans le chat */
.chat-item .profile-type-indicator {
    top: 0;
    right: 0;
    left: auto;
}

/* Animation d'apparition */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.profile-type-indicator {
    animation: fadeInScale 0.3s ease-out;
}