/**
 * Waply Avatar Centering Fix
 * This file contains fixes for avatar centering issues
 */

/* Fix for character avatars in type selection */
.waply-avatar-type-icon .waply-avatar-character::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60% !important;
    height: 60% !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix for character avatars in general */
.waply-avatar-character::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60% !important;
    height: 60% !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Do not override the background-image property here */
}

/* Specific fix for agent character */
.waply-avatar-character-agent::before {
    width: 60% !important;
    height: 60% !important;
}

/* Ensure all avatars have proper centering */
.waply-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
}

/* Ensure the icon is centered */
.waply-avatar::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 50% !important;
    height: 50% !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Fix for the avatar type selection icons */
.waply-avatar-type-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix for the preview avatar */
#waply-pos-preview-avatar::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 50% !important;
    height: 50% !important;
}

/* Fix for character avatars in the preview */
#waply-pos-preview-avatar.waply-avatar-character::before {
    width: 60% !important;
    height: 60% !important;
}