.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-left: 6px; /* Increased spacing between username and badge */
    font-size: 16px;
    transform: translateY(-6px); /* Reduced from -10px to move badge down */
    position: relative;
    top: -2px; /* Reduced from -4px */
    vertical-align: middle; /* Better vertical alignment */
}

.verified-badge i {
    color: white;
    margin-top: -2px; /* Reduced from -4px to adjust icon position */
    display: inline-block; /* Better icon positioning */
    line-height: 1; /* Ensure icon stays centered */
}

/* Optional: Add this to the username element if needed */
.username {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px; /* Small space before badge */
}

/* Specific adjustment for profile page badges */
.card-body h4.mb-1 .verified-badge {
    transform: translateY(-2px); /* Reduced from -4px */
    top: -1px; /* Reduced from -2px */
    margin-left: 4px; /* Slightly closer to username */
}

.card-body h4.mb-1 .verified-badge i {
    margin-top: -1px; /* Reduced from -2px */
}

/* Free User - Elegant Silver */
.verified-free {
    background: linear-gradient(45deg, #B4B8C5, #E2E5ED);
}

.verified-free i {
    text-shadow: 0 0 4px rgba(180, 184, 197, 0.8);
}

/* Premium User - Royal Gold */
.verified-premium {
    background: linear-gradient(45deg, #FFD700, #FDB931);
}

.verified-premium i {
    text-shadow: 0 0 4px rgba(253, 185, 49, 0.8);
}

/* VIP User - Spring Green */
.verified-vip {
    background: linear-gradient(45deg, #50C878, #3CB371);
}

.verified-vip i {
    text-shadow: 0 0 4px rgba(80, 200, 120, 0.8);
}

/* VVIP User - Royal Purple */
.verified-vvip {
    background: linear-gradient(45deg, #9678FF, #7C4DFF);
}

.verified-vvip i {
    text-shadow: 0 0 4px rgba(124, 77, 255, 0.8);
}

/* Supreme User - Ocean Blue */
.verified-supreme {
    background: linear-gradient(45deg, #1E90FF, #00BFFF);
}

.verified-supreme i {
    text-shadow: 0 0 4px rgba(30, 144, 255, 0.8);
}

/* Lord User - Imperial Gold with Crown Icon */
.verified-lord {
    background: linear-gradient(45deg, #FFD700, #FF8C00);
}

.verified-lord i {
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.9);
}

/* Specific style for Lord badge to use crown icon */
.verified-lord i.mdi:before {
    content: "\F0543"; /* Material Design Icons crown code */
    color: #FFF;
    font-size: 1.2em; /* Slightly larger crown */
}

/* Add specific styling for table cells containing username and badge */
table td .username-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px; /* Space between username and badge */
}

/* Adjust badge positioning in tables */
table td .verified-badge {
    transform: none; /* Remove default transform */
    position: static; /* Remove relative positioning */
    flex-shrink: 0; /* Prevent badge from shrinking */
    margin-left: 4px; /* Consistent spacing */
    vertical-align: middle;
}

/* Ensure username text wraps properly */
table td .username-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    max-width: calc(100% - 32px); /* Account for badge width */
}

/* New table cell styling */
.table td .d-inline-flex {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.table td .d-inline-flex span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 40px);
}

.table td .verified-badge {
    position: static;
    transform: none;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 768px) {
    table td .username-container {
        gap: 4px; /* Smaller gap on mobile */
    }
    
    table td .verified-badge {
        width: 20px; /* Slightly smaller on mobile */
        height: 20px;
        font-size: 14px;
    }
    
    .table td .d-inline-flex {
        display: flex !important;
        align-items: center;
    }
    
    .table td .d-inline-flex span:first-child {
        max-width: calc(100% - 32px);
    }
}