/**
 * Discount Badge Styles
 * Styles for product discount/sale badges (onsale class)
 */

/* Base discount badge styles - minimize height and ensure visibility */
span.onsale, 
.onsale, 
span[class*="onsale"], 
.product span.onsale, 
.products span.onsale,
.product-thumbnail span.onsale, 
.loop-product-thumbnail span.onsale {
    font-size: 10px !important;
    padding: 2px 4px !important;
    line-height: 1 !important;
    min-height: 0 !important;
    max-height: 20px !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    letter-spacing: 0px !important;
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    display: inline-block !important;
    background-color: #dc3545 !important;
    color: #fff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
}

/* Remove pseudo-elements that might interfere */
span.onsale::before, 
.onsale::before,
span.onsale::after, 
.onsale::after {
    display: none !important;
    content: none !important;
}

/* Product thumbnail specific positioning */
.product-thumbnail .onsale,
.product-thumbnail span.onsale {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
}

/* Product card specific */
.product-card .onsale,
.product-card span.onsale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
}

/* Single product page badge */
.product-images-wrapper .onsale,
.woocommerce-product-gallery .onsale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 1 !important;
    background-color: #dc3545 !important;
    color: #fff !important;
    padding: 0.5em 1em !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    font-size: 0.857em !important;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .product-thumbnail .onsale,
    .product-thumbnail span.onsale {
        top: 6px !important;
        left: 6px !important;
        font-size: 9px !important;
        padding: 1px 3px !important;
    }
    
    .product-card .onsale,
    .product-card span.onsale {
        top: 8px !important;
        left: 8px !important;
        font-size: 9px !important;
        padding: 2px 4px !important;
    }
}

/* Ensure badge doesn't break layout */
.onsale,
span.onsale {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 80px !important;
}

/* Hover effect for better visibility */
.product:hover .onsale,
.product:hover span.onsale {
    opacity: 1 !important;
    transform: scale(1.05) !important;
    transition: transform 0.2s ease !important;
}