/**
 * HFG Swap and Save — "Swap & Save" badge styles.
 *
 * .hfg-swap-badge            : default inline pill (used by the [swap_and_save_badge] shortcode).
 * .hfg-swap-badge--overlay   : absolute overlay variant (used by the auto listing/single hooks),
 *                              positioned top-left over the product card / single product image.
 * .hfg-swap-badge-label      : the inline, non-clickable label injected into the AWS dropdown row.
 */

/* Make the product card / single product wrapper a positioning context for the overlay badge. */
.woocommerce ul.products li.product,
.woocommerce div.product {
    position: relative;
}

/* Base badge — inline clickable pill (shortcode default). */
.hfg-swap-badge {
    display: inline-block;
    background-color: #0d6efd;
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 3px;
    line-height: 1.3;
    text-decoration: none !important;
}

.hfg-swap-badge:hover,
.hfg-swap-badge:focus {
    background-color: #0b5ed7;
    color: #fff !important;
}

/* Overlay variant — sits top-left over the thumbnail / product image. */
.hfg-swap-badge--overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
}

/* AWS dropdown label — small inline, non-clickable. */
.hfg-swap-badge-label {
    display: inline-block;
    background-color: #0d6efd;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
    line-height: 1.4;
}