/* Global Profile Image Styles - Make profile images circular WITHOUT forcing sizes */

/* Universal circular styling - ONLY border-radius and object-fit */
.profile-image,
.profile-avatar,
.user-avatar,
.avatar,
.avatar-image,
.rounded-circle,
img[alt*="Profile"],
img[alt*="profile"],
img[alt*="Avatar"],
img[alt*="avatar"],
img.profile-image,
img.profile-avatar,
img.user-avatar {
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
}

/* News Feed specific profile images - keep existing sizes */
.news-feed-post .profile-image,
.news-feed-post img[alt*="profile" i],
.post-header img[alt*="profile" i],
.comment-avatar img,
.user-info img[alt*="profile" i],
.author-avatar img {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Account Settings profile images - keep existing sizes */
.profile-image-container img,
.profile-image-upload img,
.settings-profile-image {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Sidebar profile images - keep existing sizes */
.unified-sidebar .profile-avatar,
.sidebar-profile img,
.profile-avatar.large {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Business Connect profile images - handled by inline styles */
.business-connect-page .profile-image,
.profile-card .profile-image,
.connection-card img {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Admin panel user avatars - keep existing sizes */
.admin-panel .user-avatar,
.users-table img[alt*="avatar" i],
.provider-avatar {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Message/Chat avatars - keep existing sizes */
.message-avatar img,
.chat-avatar,
.conversation-avatar {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Profile page main avatar - keep existing sizes */
.profile-page .profile-avatar,
.profile-header .avatar,
.user-profile-main img {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Placeholder avatars with initials */
.avatar-placeholder,
.avatar-initials,
.profile-placeholder {
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e0e0e0 !important;
    color: #666666 !important;
    font-weight: 600 !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .news-feed-post .profile-image,
    .post-header img {
        width: 35px !important;
        height: 35px !important;
    }
    
    .profile-image-container img,
    .settings-profile-image {
        width: 100px !important;
        height: 100px !important;
    }
    
    .profile-page .profile-avatar {
        width: 120px !important;
        height: 120px !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .news-feed-post .profile-image,
    .post-header img {
        width: 30px !important;
        height: 30px !important;
    }
    
    .profile-image-container img,
    .settings-profile-image {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Fix any stretched or distorted images */
img[src*="profile"],
img[src*="avatar"] {
    object-fit: cover !important;
    aspect-ratio: 1 !important;
}

/* Ensure hover effects maintain circular shape */
.profile-image:hover,
.profile-avatar:hover,
.user-avatar:hover {
    border-radius: 50% !important;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}