/*
 * Product Returnable Status badge.
 *
 * Single-line "✓ Item is returnable" / "✗ Item is not returnable"
 * pill that mirrors the proportions of the canonical `.ims-part-number-badge`
 * pill so the two badges sit at the same scale on the PDP. The colour
 * tokens diverge by status: tinted red for "not returnable", tinted green
 * for "returnable".
 *
 * Note: this only affects the PDP block. The listing card uses a separate
 * `.ims-returnable-status` element with its own styling.
 */

.ims-returnable-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.175rem 0.45rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1;
    width: fit-content;
}

.ims-returnable-badge__icon {
    font-size: 0.75rem;
    line-height: 1;
    color: inherit;
}

.ims-returnable-badge__text {
    font-weight: 500;
    letter-spacing: 0.02em;
    color: inherit;
}

.ims-returnable-badge--yes {
    background: #dcfce7;
    color: #15803d;
}

.ims-returnable-badge--no {
    background: #fee2e2;
    color: #dc2626;
}

/*
 * PDP-specific placement: sits between the purchase row and the meta
 * list. The template wraps the block in `.ims-pdp-returnable` so we can
 * give it a touch of breathing room without affecting the badge when it
 * appears elsewhere (e.g. dropped into a custom block layout).
 */
.ims-pdp-returnable {
    margin: 0.75rem 0 1rem;
}