/*
====================================================
VoteMVP Avatar/Media Shared Styles
====================================================
Consolidated avatar, photo, and media styles used across components
*/

/* Base Avatar Styles */
.user-avatar,
.player-avatar,
.team-avatar,
.sponsor-avatar,
.organization-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Standard Size Avatars (40px) */
.user-avatar,
.player-avatar,
.sponsor-avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

/* Team avatars - slightly larger for better visibility */
.team-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

/* Organization avatars - same as team */
.organization-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

/* Avatar Background Colors */
.user-avatar {
    background: var(--color-primary-500);
}

.player-avatar {
    background: var(--bs-primary);
}

.team-avatar {
    background: var(--color-accent-500);
}

.sponsor-avatar {
    background: var(--bs-primary);
}

.organization-avatar {
    background: var(--bs-warning);
}

/* Photo/Logo Styles */
.user-photo,
.player-photo,
.team-logo,
.sponsor-logo,
.organization-logo {
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Standard Size Photos/Logos (40px) */
.user-photo,
.player-photo,
.sponsor-logo {
    width: 40px;
    height: 40px;
}

/* Larger Photos/Logos (48px) */
.team-logo,
.organization-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--bs-light);
}

/* Game and Proposal Icons */
.game-icon,
.proposal-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--color-accent-500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Large Avatar Variants */
.user-avatar-lg,
.player-avatar-lg,
.team-avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 20px;
    border-radius: 12px;
}

.user-photo-lg,
.player-photo-lg,
.team-logo-lg {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}

/* Small Avatar Variants */
.user-avatar-sm,
.player-avatar-sm,
.team-avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
    border-radius: 6px;
}

.user-photo-sm,
.player-photo-sm,
.team-logo-sm {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

/* Profile Display Containers */
.profile-avatar-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-avatar-container .profile-details h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.profile-avatar-container .profile-details p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    /* Reduce avatar sizes on mobile */
    .user-avatar,
    .player-avatar,
    .sponsor-avatar,
    .user-photo,
    .player-photo,
    .sponsor-logo {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .team-avatar,
    .organization-avatar,
    .team-logo,
    .organization-logo {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .game-icon,
    .proposal-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    /* Adjust profile containers for mobile */
    .profile-avatar-container {
        gap: 0.75rem;
    }

    .profile-avatar-container .profile-details h3 {
        font-size: 1.1rem;
    }

    .profile-avatar-container .profile-details p {
        font-size: 0.85rem;
    }
}

/* Hover Effects for Interactive Avatars */
.interactive-avatar {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.interactive-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Avatar Loading States */
.avatar-loading {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary);
    position: relative;
    overflow: hidden;
}

.avatar-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}