/* PawLog MEMBER Profile Styles */

/* MEMBER Badge */
.member-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    animation: memberShine 3s ease-in-out infinite;
}

.member-badge svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

@keyframes memberShine {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 2px 12px rgba(255, 215, 0, 0.6);
    }
}

/* MEMBER Profile Frame */
.profile-avatar-large.member-frame {
    border: 3px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(135deg, var(--color-primary), var(--color-secondary)),
                      linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    animation: memberRotate 4s linear infinite;
}

@keyframes memberRotate {
    0% {
        background-image: linear-gradient(135deg, var(--color-primary), var(--color-secondary)),
                          linear-gradient(0deg, #FFD700, #FFA500, #FFD700);
    }
    100% {
        background-image: linear-gradient(135deg, var(--color-primary), var(--color-secondary)),
                          linear-gradient(360deg, #FFD700, #FFA500, #FFD700);
    }
}

/* MEMBER Mini Avatar (Dashboard) */
.profile-mini-avatar.member-frame {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #FFD700, #FFA500) border-box;
}

/* MEMBER User Card in Social */
.user-card.member-user {
    border: 2px solid transparent;
    background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
                linear-gradient(135deg, #FFD700, #FFA500) border-box;
}

.user-avatar.member-frame {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #FFD700, #FFA500) border-box;
}

/* MEMBER Label (small text badge) */
.member-label {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Admin styles */
.admin-frame {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #667eea, #764ba2) border-box;
}

.profile-avatar-large.admin-frame {
    border: 3px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(135deg, var(--color-primary), var(--color-secondary)),
                      linear-gradient(135deg, #667eea, #764ba2, #667eea);
}

.admin-label {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .member-badge {
        font-size: 0.625rem;
        padding: 0.2rem 0.4rem;
    }
    
    .member-badge svg {
        width: 12px;
        height: 12px;
    }
    
    /* Smaller MEMBER frame on mini avatar */
    .profile-mini-avatar.member-frame {
        border-width: 1.5px;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .profile-avatar-large.member-frame {
        background-image: linear-gradient(135deg, var(--color-primary), var(--color-secondary)),
                          linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    }
    
    .profile-mini-avatar.member-frame {
        background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
                    linear-gradient(135deg, #FFD700, #FFA500) border-box;
    }
    
    .user-avatar.member-frame {
        background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
                    linear-gradient(135deg, #FFD700, #FFA500) border-box;
    }
}