/*!
 * KOMOD BADGES — Clean Icon System (No backgrounds/borders)
 * Path: public/assets/css/badges.css
 */

/* --- 1. Container --- */
.k-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- 2. The Badge Wrapper (Now Transparent) --- */ 
.k-badges .k-medal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Сохраняем размеры для выравнивания */
    width: 75px;
    height: 75px;
    
    /* Убираем все оформление вокруг */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    transition: transform 0.2s ease;
    cursor: default;
    user-select: none;
}

/* Отключаем эффект отблеска */
.k-badges .k-medal::before {
    display: none !important;
}

/* --- 3. Icon Styling (SVG & IMG) --- */
.k-badges .k-medal svg,
.k-badges .k-medal .k-medal-img {
    display: block;
    position: relative;
    z-index: 1;
}

/* Стили для SVG иконок (Tabler) */
.k-badges .k-medal svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Стили для твоей картинки-награды */
.k-badges .k-medal .k-medal-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Чтобы иконка не обрезалась */
}

/* --- 4. Rarity Colors (Affect only SVG icons) --- */
.k-badges .k-medal[data-rarity="common"] { color: #64748b; }
.k-badges .k-medal[data-rarity="rare"]   { color: #3b82f6; }
.k-badges .k-medal[data-rarity="epic"]   { color: #a855f7; }
.k-badges .k-medal[data-rarity="legendary"] { color: #f59e0b; }

/* --- 5. Hover Effects --- */
.k-badges .k-medal:hover {
    transform: scale(1.15);
}

/* --- 6. The "+N" Counter Button --- */
.k-badges .k-medal--more {
    width: auto !important;
    height: 24px !important;
    min-width: 24px;
    padding: 0 8px !important;
    border-radius: 6px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}