.abc3badges,
.abc3badges-admin {
    --abc3badges-blue: #087cf0;
    --abc3badges-green: #198754;
    --abc3badges-gold: #a66a00;
    --abc3badges-purple: #6f42c1;
    --abc3badges-red: #c23934;
    --abc3badges-gray: #58636f;
    --abc3badges-surface: #ffffff;
    --abc3badges-border: rgba(31, 48, 65, 0.14);
}

.abc3badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block: 0.55rem;
}

.abc3badges__badge {
    align-items: center;
    background: var(--abc3badges-bg, var(--abc3badges-blue));
    border: 1px solid var(--abc3badges-item-border, transparent);
    box-shadow: 0 0.15rem 0.35rem rgba(18, 38, 63, 0.2);
    color: var(--abc3badges-text, #fff);
    display: inline-flex;
    font-family: var(--abc3badges-font-family, system-ui, sans-serif);
    font-size: var(--abc3badges-font-size, 13px);
    font-weight: 700;
    gap: 0.32rem;
    line-height: var(--abc3badges-line-height, 1.2);
    max-width: 100%;
    opacity: var(--abc3badges-opacity, 1);
    padding: var(--abc3badges-padding-y, 7px) var(--abc3badges-padding-x, 12px);
    vertical-align: middle;
}

.abc3badges__badge--pill { border-radius: 999px; }
.abc3badges__badge--seal { border-radius: 50%; min-height: 4.5em; min-width: 4.5em; justify-content: center; text-align: center; }
.abc3badges__badge--starburst {
    aspect-ratio: 1;
    clip-path: polygon(50% 0%,61% 12%,75% 7%,82% 22%,98% 25%,91% 41%,100% 53%,86% 63%,87% 80%,69% 81%,61% 97%,47% 88%,33% 100%,25% 83%,8% 80%,14% 62%,0% 51%,14% 39%,4% 23%,22% 19%,28% 3%,42% 12%);
    justify-content: center;
    min-height: 5.3em;
    min-width: 5.3em;
    text-align: center;
}
.abc3badges__badge--starburst[data-abc3badges-has-text-width="1"] {
    width: max(5.3em, calc(var(--abc3badges-text-width) + (2 * var(--abc3badges-padding-x, 12px))));
}
.abc3badges__badge--ribbon-horizontal { border-radius: 0.35rem 0 0 0.35rem; }
.abc3badges__badge--ribbon-vertical {
    align-self: flex-start;
    border-radius: 0 0 0.45rem 0.45rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.abc3badges__badge--ribbon-vertical[data-text-direction="bottom-to-top"] .abc3badges__label,
.abc3badges__badge--ribbon-vertical[data-text-direction="bottom-to-top"] .abc3badges__symbol {
    transform: rotate(180deg);
}

.abc3badges--overlay {
    bottom: 0;
    display: block;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 82;
}

.abc3badges--overlay .abc3badges__group {
    display: flex;
    gap: 6px;
    max-width: min(70%, 520px);
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.abc3badges--overlay .abc3badges__group--top-right,
.abc3badges--overlay .abc3badges__group--right-edge {
    align-items: flex-end;
    flex-direction: column;
}

.abc3badges--overlay .abc3badges__group--right-vertical {
    align-items: flex-start;
    flex-direction: row-reverse;
}

.abc3badges--overlay .abc3badges__badge {
    margin-right: var(--abc3badges-offset-x, 8px);
    margin-top: var(--abc3badges-offset-y, 8px);
    max-width: 100%;
}

.abc3badges--overlay .abc3badges__badge[data-position="right-edge"] { margin-right: 0; }
.abc3badges--overlay .abc3badges__badge[data-position="right-vertical"] { margin-right: var(--abc3badges-offset-x, 8px); }
.abc3badges--overlay .abc3badges__badge--ribbon-horizontal {
    margin-right: 0;
}
.abc3badges--overlay .abc3badges__badge--ribbon-vertical {
    margin-top: 0;
}
.abc3badges--directory { z-index: 70; }
.abc3badges--map { margin: 0.3rem 0 0.55rem; }

.abc3badges__symbol {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.02em;
    justify-content: center;
    min-width: 1em;
}

.abc3badges__symbol::before { content: "★"; }
.abc3badges__symbol[data-symbol="check"]::before { content: "✓"; }
.abc3badges__symbol[data-symbol="heart"]::before { content: "♥"; }
.abc3badges__symbol[data-symbol="shield"]::before { content: "◆"; }
.abc3badges__symbol[data-symbol="award"]::before { content: "●"; }
.abc3badges__symbol[data-symbol="partner"]::before { content: "↔"; }

.abc3badges__label {
    max-width: var(--abc3badges-text-width, none);
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
}

.abc3badges-admin {
    background: var(--abc3badges-surface);
}

.abc3badges-admin__tabs,
.abc3badges-admin__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.abc3badges-target-search { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.abc3badges-target-search .form-control { min-width: 180px; }

.abc3badges-admin .table td,
.abc3badges-admin .table th {
    vertical-align: middle;
}

.abc3badges-order-form {
    display: inline-block;
    margin: 0 0 0 0.25rem;
}

.abc3badges-order-value {
    display: inline-block;
    min-width: 2.5rem;
    text-align: right;
}

.abc3badges-admin .abc3badges__badge {
    white-space: nowrap;
}

[data-abc3badges-target-field][hidden] {
    display: none;
}

@media (max-width: 767.98px) {
    .abc3badges-admin .table-responsive {
        border: 0;
    }

    .abc3badges__badge {
        font-size: min(var(--abc3badges-font-size, 13px), 12px);
        max-width: 190px;
        padding: min(var(--abc3badges-padding-y, 7px), 6px) min(var(--abc3badges-padding-x, 12px), 9px);
    }

    .abc3badges--overlay { max-width: none; }
    .abc3badges--overlay .abc3badges__group { gap: 3px; max-width: 62%; }
    .abc3badges--overlay .abc3badges__badge { margin-top: min(var(--abc3badges-offset-y, 8px), 6px); }
    .abc3badges--overlay .abc3badges__badge--ribbon-horizontal { margin-right: 0; }
    .abc3badges--overlay .abc3badges__badge--ribbon-vertical { margin-top: 0; }
    .abc3badges__badge--seal,
    .abc3badges__badge--starburst { min-height: 4.4em; min-width: 4.4em; }
}