/* Updated addon rarity styling */
.addon-rarity {
    display: inline-block;
    background-color: rgba(112, 15, 15, 0.3);
    color: #fff;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
    margin-left: 0.5rem;
    font-weight: normal;
}

.addon-rarity.common {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
}

.addon-rarity.uncommon {
    background-color: rgba(0, 255, 0, 0.8);
    color: #000;
}

.addon-rarity.rare {
    background-color: rgba(0, 100, 255, 0.8);
    color: #fff;
}

.addon-rarity.very-rare {
    background-color: rgba(128, 0, 128, 0.8);
    color: #fff;
}

.addon-rarity.ultra-rare {
    background-color: rgba(255, 0, 0, 0.8);
    color: #fff;
}

.addon-rarity.event {
    background-color: rgba(255, 165, 0, 0.8);
    color: #000;
}

/* Updated perk item styling to reflect rarity colors on the container */
.perk-item.common {
    border: 2px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.1);
}

.perk-item.uncommon {
    border: 2px solid rgba(0, 255, 0, 0.8);
    background-color: rgba(0, 255, 0, 0.1);
}

.perk-item.rare {
    border: 2px solid rgba(0, 100, 255, 0.8);
    background-color: rgba(0, 100, 255, 0.1);
}

.perk-item.very-rare {
    border: 2px solid rgba(128, 0, 128, 0.8);
    background-color: rgba(128, 0, 128, 0.1);
}

.perk-item.ultra-rare {
    border: 2px solid rgba(255, 0, 0, 0.8);
    background-color: rgba(255, 0, 0, 0.1);
}

.perk-item.event {
    border: 2px solid rgba(255, 165, 0, 0.8);
    background-color: rgba(255, 165, 0, 0.1);
}