/**
 * Component: Bonus Toplist Styles
 * Updated: 2025-11-11
 * Developer: James (Dev Agent)
 * Compliance: Mobile-first migration brief v1.0
 * Note: Extends casino-toplist-extended.css with bonus-specific overrides
 */



/* Bonus Toplist Specific Overrides - Extends casino-toplist styles */

/* Editor's Choice Badge styling specifically for bonus-toplist */
.casino-toplist-container .badge-editors-choice {
    position: relative;
    display: inline-flex;  /* Changed from inline-block for flexbox centering */
    align-items: center;   /* Flexbox vertical centering */
    justify-content: center;  /* Flexbox horizontal centering */
    /* Component-specific badge dimensions - documented design requirement */
    /* Using token calculations to approximate the 140x40px badge size */
    width: calc(var(--spacing-24) + var(--spacing-10) + var(--spacing-2));  /* 96 + 40 + 8 = 144px (close to 140px) */
    min-height: var(--spacing-10);  /* 40px - Using min-height for flexibility */
    margin-top: var(--spacing-3);
}

.casino-toplist-container .badge-editors-choice .badge-text {
    /* Removed position absolute - using flexbox parent for centering */
    display: inline-block;
    color: var(--color-base-dark);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-p2-base);
    white-space: nowrap;
    z-index: 1;
    font-family: var(--font-family-header);
    /* Text is centered via parent flexbox properties */
}

/* Any bonus-specific styling adjustments can go here */
.casino-toplist-container .bonus-toplist-specific {
    /* Reserved for bonus-specific styles that differ from casino-toplist */
}