/**
 * Badge Overlay Styles for Zen Cart
 *
 * This stylesheet is loaded automatically by the Badge Overlay plugin observer
 * when the plugin is enabled via the Plugin Manager. No manual CSS copying needed.
 *
 * Colour, shape, and position are controlled via the Zen Cart admin
 * (Configuration > Badge Overlay). Colour is applied as an inline style
 * (any CSS colour value), while shape and position use modifier classes.
 *
 * @copyright Copyright 2025
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 */

/* =============================================
   Wrapper
   ============================================= */
.zc-badge-image-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: top;
    /* Create a stacking context so the badge's z-index stays inside this
       wrapper. Without it the badge competes in the page's root stacking
       context and can paint over fixed elements such as a mobile menu. */
    z-index: 0;
}

/* =============================================
   Base badge styling (shared by all badges)
   ============================================= */
.zc-badge {
    position: absolute;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: bold;
    pointer-events: none;
    line-height: 1.2;
    letter-spacing: 0.5px;
    /* No z-index needed: an absolutely positioned badge already paints above
       the statically positioned image beside it. Setting one here made the
       badge outrank fixed page furniture such as a mobile menu bar. */
}

/* =============================================
   Shape classes
   ============================================= */
.zc-badge-shape-rectangle { border-radius: 3px; }
.zc-badge-shape-rounded   { border-radius: 50px; }

/* =============================================
   Position classes
   ============================================= */
.zc-badge-pos-top-left     { top: 8px;    left: 8px;   }
.zc-badge-pos-top-right    { top: 8px;    right: 8px;  }
.zc-badge-pos-bottom-left  { bottom: 8px; left: 8px;   }
.zc-badge-pos-bottom-right { bottom: 8px; right: 8px;  }

/* =============================================
   Centerbox-specific position adjustments
   ============================================= */
.centerBoxContentsNew .zc-badge-pos-top-right,
.centerBoxContentsFeatured .zc-badge-pos-top-right,
.centerBoxContentsSpecials .zc-badge-pos-top-right {
    top: 19px;
    right: -1px;
}
.centerBoxContentsNew .zc-badge-pos-top-left,
.centerBoxContentsFeatured .zc-badge-pos-top-left,
.centerBoxContentsSpecials .zc-badge-pos-top-left {
    top: 19px;
    left: 19px;
}
.centerBoxContentsNew .zc-badge-pos-bottom-right,
.centerBoxContentsFeatured .zc-badge-pos-bottom-right,
.centerBoxContentsSpecials .zc-badge-pos-bottom-right {
    bottom: 19px;
    right: -1px;
}
.centerBoxContentsNew .zc-badge-pos-bottom-left,
.centerBoxContentsFeatured .zc-badge-pos-bottom-left,
.centerBoxContentsSpecials .zc-badge-pos-bottom-left {
    bottom: 19px;
    left: 19px;
}

/* =============================================
   Main product image – larger badges
   ============================================= */
#productMainImage .zc-badge {
    font-size: 13px;
}
#productMainImage .zc-badge-pos-top-left     { top: 20px;    left: 20px;  }
#productMainImage .zc-badge-pos-top-right    { top: 20px;    right: 20px; }
#productMainImage .zc-badge-pos-bottom-left  { bottom: 20px; left: 20px;  }
#productMainImage .zc-badge-pos-bottom-right { bottom: 20px; right: 20px; }

/* =============================================
   Hide Zen Cart's default savings display
   ============================================= */
.productSpecialPriceSale,
.sale-save,
.normalprice + br + .productSpecialPrice .sale-text,
.productPriceDiscount {
    display: none !important;
}