/* =============================================================
   Vkard Badges Widget - frontend styles
   ============================================================= */

.vkbdg__list {
    --vkbdg-gap-x: 8px;
    --vkbdg-gap-y: 8px;
    --vkbdg-default-bg: #f3f4f6;
    --vkbdg-default-color: #374151;
    --vkbdg-default-border-color: transparent;
    --vkbdg-default-border-style: solid;
    --vkbdg-default-border-width: 0;
    --vkbdg-default-radius: 999px;
    --vkbdg-default-padding: 5px 12px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--vkbdg-gap-y) var(--vkbdg-gap-x);
    box-sizing: border-box;
    width: 100%;
}

.vkbdg__list * {
    box-sizing: border-box;
}

.vkbdg__badge {
    --vkbdg-bg: var(--vkbdg-default-bg);
    --vkbdg-color: var(--vkbdg-default-color);
    --vkbdg-icon-color: var(--vkbdg-color);
    --vkbdg-border-color: var(--vkbdg-default-border-color);
    --vkbdg-border-style: var(--vkbdg-default-border-style);
    --vkbdg-border-width: var(--vkbdg-default-border-width);
    --vkbdg-radius: var(--vkbdg-default-radius);
    --vkbdg-padding: var(--vkbdg-default-padding);
    --vkbdg-icon-gap: 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vkbdg-icon-gap);
    min-width: 0;
    margin: 0;
    padding: var(--vkbdg-padding);
    border: var(--vkbdg-border-width) var(--vkbdg-border-style) var(--vkbdg-border-color);
    border-radius: var(--vkbdg-radius);
    background: var(--vkbdg-bg);
    color: var(--vkbdg-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
}

.vkbdg__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--vkbdg-icon-color);
    font-size: 1em;
    line-height: 1;
}

.vkbdg__icon i,
.vkbdg__icon svg {
    display: block;
}

.vkbdg__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.vkbdg__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.vkbdg--best-seller {
    --vkbdg-bg: #e5f6ff;
    --vkbdg-color: #0099ff;
}

.vkbdg--free-shipping {
    --vkbdg-bg: #e8fbf4;
    --vkbdg-color: #009f66;
    --vkbdg-icon-color: #00a86b;
}

.vkbdg--new {
    --vkbdg-bg: #fff7ed;
    --vkbdg-color: #f97316;
    --vkbdg-icon-color: #f97316;
}

.vkbdg--premium {
    --vkbdg-bg: #f5f3ff;
    --vkbdg-color: #7c3aed;
    --vkbdg-icon-color: #7c3aed;
}

.vkbdg--promo {
    --vkbdg-bg: #fff1f2;
    --vkbdg-color: #e11d48;
    --vkbdg-icon-color: #e11d48;
}