/* ===========================================
   DJSET User Cards v5.0 - CENTERED
   Centered avatar, name, genre pills
   =========================================== */

/* Grid Layout */
.djset-users-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 16px !important;
    padding: 16px 0 !important;
}

/* ===========================================
   CARD - Centered Design
   =========================================== */
.djset-user-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: #1c1c1e !important;
    border: 1px solid #2d2d2d !important;
    border-radius: 16px !important;
    padding: 24px 20px 20px !important;
    transition: all 0.2s ease !important;
}

.djset-user-card:hover {
    border-color: #404040 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.35) !important;
}

/* HIDE header */
.djset-user-card-header {
    display: none !important;
}

/* Badges - centered row */
.djset-user-card-badges {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}

.djset-card-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 10px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.7) !important;
}

.djset-card-badge i {
    font-size: 10px !important;
}

.djset-card-badge--dj {
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
}

/* Avatar - Centered */
.djset-user-card > .djset-user-avatar {
    position: relative !important;
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 16px !important;
}

.djset-user-card > .djset-user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 3px solid #3a3a3e !important;
    background: #2a2a2e !important;
}

/* Body - Centered */
.djset-user-card-body {
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Name Row - Centered */
.djset-user-name-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

.djset-user-card .djset-user-name {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.djset-user-card .djset-user-name:hover {
    color: #a78bfa !important;
}

.djset-verified-badge {
    width: 18px !important;
    height: 18px !important;
    background: #3b82f6 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.djset-verified-badge i {
    font-size: 9px !important;
    color: #fff !important;
}

/* Role */
.djset-user-card .djset-user-username {
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px !important;
    display: block !important;
    margin-bottom: 12px !important;
}

/* Location */
.djset-user-location-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: rgba(255,255,255,0.6) !important;
    font-size: 13px !important;
    margin-bottom: 12px !important;
}

.djset-user-location-row i {
    color: #ef4444 !important;
    font-size: 12px !important;
}

/* ===========================================
   Genre Pills - Individual Tags
   =========================================== */
.djset-user-card .djset-user-genres {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}

/* Hide the icon box in genres */
.djset-category-icon {
    display: none !important;
}

/* Style genre text as pills */
.djset-genre-text {
    display: inline-flex !important;
    padding: 6px 12px !important;
    background: rgba(167, 139, 250, 0.12) !important;
    border: 1px solid rgba(167, 139, 250, 0.25) !important;
    border-radius: 20px !important;
    color: #a78bfa !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Individual genre pills if using spans */
.djset-genre-pill {
    display: inline-flex !important;
    padding: 6px 12px !important;
    background: rgba(167, 139, 250, 0.12) !important;
    border: 1px solid rgba(167, 139, 250, 0.25) !important;
    border-radius: 20px !important;
    color: #a78bfa !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ===========================================
   Footer - Two Buttons
   =========================================== */
.djset-user-card-footer {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    margin-top: auto !important;
}

/* HIDE footer category */
.djset-footer-category,
.djset-footer-icon,
.djset-footer-text {
    display: none !important;
}

/* Footer Actions - Full width */
.djset-footer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Buttons */
.djset-card-action-btn {
    flex: 1 !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.djset-card-action-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

.djset-card-action-btn i {
    font-size: 14px !important;
}

/* View Profile */
.djset-btn-view-profile {
    background: rgba(124, 92, 255, 0.15) !important;
    border-color: rgba(124, 92, 255, 0.3) !important;
    color: #a78bfa !important;
}

.djset-btn-view-profile:hover {
    background: rgba(124, 92, 255, 0.25) !important;
    border-color: rgba(124, 92, 255, 0.45) !important;
}

/* Follow Button */
.djset-follow-btn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

.djset-follow-btn:hover {
    background: rgba(124, 92, 255, 0.15) !important;
    border-color: rgba(124, 92, 255, 0.3) !important;
    color: #a78bfa !important;
}

/* Following State */
.djset-follow-btn.is-following {
    background: rgba(124, 92, 255, 0.15) !important;
    border-color: rgba(124, 92, 255, 0.3) !important;
    color: #a78bfa !important;
}

.djset-follow-btn.is-following:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

/* ===========================================
   Empty State
   =========================================== */
.djset-empty-state {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 50px 24px !important;
    background: #1c1c1e !important;
    border: 1px dashed #2d2d2d !important;
    border-radius: 16px !important;
}

.djset-empty-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 14px !important;
    background: rgba(124, 92, 255, 0.1) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.djset-empty-icon i {
    font-size: 26px !important;
    color: #a78bfa !important;
}

.djset-empty-state h4 {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 6px !important;
}

.djset-empty-state p {
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* ===========================================
   Mobile
   =========================================== */
@media (max-width: 768px) {
    .djset-users-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
    .djset-user-card {
        padding: 20px 16px 16px !important;
    }
    
    .djset-user-card > .djset-user-avatar {
        width: 64px !important;
        height: 64px !important;
    }
    
    .djset-card-action-btn {
        height: 38px !important;
        font-size: 12px !important;
    }
}