/* Badge Icons - Flat design with orange and blue theme */

.badge-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff5f1f 0%, #03629e 100%);
    box-shadow: 0 4px 6px rgba(255, 95, 31, 0.2);
    position: relative;
}

.badge-icon::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff 0%, #f0f9ff 100%);
}

.badge-icon svg {
    width: 28px;
    height: 28px;
    position: relative;
    z-index: 1;
}

/* Badge Icon Variants - Using orange (#ff5f1f) and blue (#03629e) combinations */
.badge-icon-newcomer {
    background: linear-gradient(135deg, #03629e 0%, #0284c7 100%);
    box-shadow: 0 4px 6px rgba(3, 98, 158, 0.25);
}

.badge-icon-first-steps {
    background: linear-gradient(135deg, #ff5f1f 0%, #03629e 100%);
    box-shadow: 0 4px 6px rgba(255, 95, 31, 0.25);
}

.badge-icon-getting-started {
    background: linear-gradient(135deg, #03629e 0%, #ff5f1f 100%);
    box-shadow: 0 4px 6px rgba(3, 98, 158, 0.25);
}

.badge-icon-active-member {
    background: linear-gradient(135deg, #ff5f1f 0%, #0284c7 100%);
    box-shadow: 0 4px 6px rgba(255, 95, 31, 0.25);
}

.badge-icon-rising-star {
    background: linear-gradient(135deg, #ff8a50 0%, #03629e 100%);
    box-shadow: 0 4px 6px rgba(255, 138, 80, 0.25);
}

.badge-icon-community-leader {
    background: linear-gradient(135deg, #ff5f1f 0%, #014f7f 100%);
    box-shadow: 0 4px 6px rgba(255, 95, 31, 0.3);
}

.badge-icon-influencer {
    background: linear-gradient(135deg, #03629e 0%, #ff5f1f 100%);
    box-shadow: 0 4px 6px rgba(3, 98, 158, 0.3);
}

.badge-icon-legend {
    background: linear-gradient(135deg, #ff5f1f 0%, #025a92 100%);
    box-shadow: 0 4px 6px rgba(255, 95, 31, 0.3);
}

.badge-icon-hall-of-fame {
    background: linear-gradient(135deg, #014f7f 0%, #ff8a50 100%);
    box-shadow: 0 4px 6px rgba(1, 79, 127, 0.35);
}

.badge-icon-helpful {
    background: linear-gradient(135deg, #03629e 0%, #ff8a50 100%);
    box-shadow: 0 4px 6px rgba(3, 98, 158, 0.25);
}

.badge-icon-popular {
    background: linear-gradient(135deg, #ff5f1f 0%, #0369a1 100%);
    box-shadow: 0 4px 6px rgba(255, 95, 31, 0.3);
}

.badge-icon-viral {
    background: linear-gradient(135deg, #ff8a50 0%, #025a92 100%);
    box-shadow: 0 4px 6px rgba(255, 138, 80, 0.3);
}

.badge-icon-conversationalist {
    background: linear-gradient(135deg, #0284c7 0%, #ff5f1f 100%);
    box-shadow: 0 4px 6px rgba(2, 132, 199, 0.25);
}

.badge-icon-contributor {
    background: linear-gradient(135deg, #ff5f1f 0%, #0369a1 100%);
    box-shadow: 0 4px 6px rgba(255, 95, 31, 0.25);
}

.badge-icon-prolific-author {
    background: linear-gradient(135deg, #03629e 0%, #ff5f1f 100%);
    box-shadow: 0 4px 6px rgba(3, 98, 158, 0.3);
}

/* Badge icon in earned state */
.badge-earned .badge-icon {
    box-shadow: 0 6px 12px rgba(255, 95, 31, 0.4);
    transform: scale(1.05);
}

/* Badge icon sizes */
.badge-icon-sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.badge-icon-sm::before {
    border-radius: 6px;
}

.badge-icon-sm svg {
    width: 20px;
    height: 20px;
}

.badge-icon-xs {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.badge-icon-xs::before {
    border-radius: 4px;
}

.badge-icon-xs svg {
    width: 14px;
    height: 14px;
}

.badge-icon-lg {
    width: 64px;
    height: 64px;
}

.badge-icon-lg svg {
    width: 36px;
    height: 36px;
}