/* ==========================================================================
   Badges — rarity, condition, stock, foil
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
    height: 18px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* Rarity badges — colour-coded per MTG convention                             */
/* -------------------------------------------------------------------------- */
.badge--rarity {
    min-width: 20px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 9px;
}

.badge--rarity-mythic,
.badge--rarity-mythic-rare {
    background: linear-gradient(135deg, #e87020, #c44a00);
    color: #fff;
    box-shadow: 0 1px 4px rgba(232, 112, 32, 0.5);
}

.badge--rarity-rare {
    background: linear-gradient(135deg, #c9a84c, #8a6a1c);
    color: #fff;
    box-shadow: 0 1px 4px rgba(201, 168, 76, 0.4);
}

.badge--rarity-uncommon {
    background: linear-gradient(135deg, #b0c8d8, #7090a8);
    color: #1c1c18;
}

.badge--rarity-common {
    background: linear-gradient(135deg, #e8e4d4, #bfb59a);
    color: #1c1c18;
}

.badge--rarity-special,
.badge--rarity-bonus {
    background: linear-gradient(135deg, #9b51e0, #5e2d99);
    color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Condition badges                                                             */
/* -------------------------------------------------------------------------- */
.badge--condition {
    background: var(--color-vault-raised);
    border: 1px solid var(--color-olive-deep);
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Foil badge                                                                   */
/* -------------------------------------------------------------------------- */
.badge--foil {
    background: linear-gradient(
        90deg,
        #c9a84c 0%, #b575f0 33%, #5e9eed 66%, #c9a84c 100%
    );
    background-size: 200% 100%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    animation: gold-shimmer 2.5s linear infinite;
    border: none;
}

/* -------------------------------------------------------------------------- */
/* Stock badges                                                                 */
/* -------------------------------------------------------------------------- */
.badge--in-stock {
    background: rgba(90, 158, 111, 0.15);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.badge--low-stock {
    background: rgba(201, 168, 76, 0.15);
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
}

.badge--oos {
    background: rgba(192, 57, 43, 0.15);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

/* -------------------------------------------------------------------------- */
/* Format legality pills (single product page)                                  */
/* -------------------------------------------------------------------------- */
.format-legality {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.format-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.format-pill--legal {
    background: rgba(90, 158, 111, 0.15);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.format-pill--not-legal {
    background: rgba(107, 106, 78, 0.1);
    border: 1px solid var(--color-olive-deep);
    color: var(--color-text-muted);
    opacity: 0.6;
}