/* Frontend styles for discount badges */

.drba-discount-badge {
    color: #2271b1;
    font-weight: 600;
}

/* Product page discount badge */
.drba-product-discount-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    /* Default color, can be overridden by inline style */
    background: #2271b1;
}

/* Loop discount badge (before price) */
.drba-loop-discount-badge {
    display: inline-block;
    padding: 6px 12px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 8px;
    /* Default color, can be overridden by inline style */
    background: #2271b1;
}

/* Ensure loop badge appears before price */
.woocommerce ul.products li.product .drba-loop-discount-badge,
li.product .drba-loop-discount-badge,
.wc-block-grid__product .drba-loop-discount-badge {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}

/* Cart discount badge */
.woocommerce-cart .drba-discount-badge {
    display: block;
    margin-top: 5px;
    color: #2271b1;
    font-weight: 600;
}

/* Loop discount badge */
.drba-loop-badge {
    margin-top: 8px;
    font-size: 12px;
    padding: 6px 10px;
}

/* Product loop item styling */
.woocommerce ul.products li.product .drba-product-discount-badge,
.woocommerce-page ul.products li.product .drba-product-discount-badge {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    padding: 6px 10px;
}

/* Ensure badge doesn't break layout in loops */
.woocommerce ul.products li.product .price + .drba-product-discount-badge {
    display: block;
    width: 100%;
    text-align: center;
}

/* Discount badge on product image */
.drba-sale-badge {
    position: absolute;
    z-index: 10;
    padding: 6px 12px;
    color: #fff;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Default values - will be overridden by dynamic CSS */
    top: 10px;
    left: 10px;
    border-radius: 4px;
    font-size: 14px;
}

/* Ensure product image container is relative for absolute positioning */
/* Apply to all product loops (shop, category, recommended, related, etc.) */
.woocommerce ul.products li.product .product-image-wrapper,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product,
li.product .product-image-wrapper,
li.product .woocommerce-loop-product__link,
li.product a,
li.product,
.wc-block-grid__product .wc-block-grid__product-image,
.wc-block-grid__product a,
.woocommerce .product .woocommerce-product-gallery__wrapper,
.woocommerce .product .woocommerce-product-gallery,
.woocommerce .product .woocommerce-product-gallery__image,
.woocommerce .product .product-image-wrapper,
.woocommerce .product .wp-post-image,
.woocommerce .product figure.woocommerce-product-gallery__wrapper {
    position: relative;
}

/* Single product page badge positioning - default values, can be overridden by dynamic CSS */
.woocommerce .product .drba-sale-badge {
    /* Default values - will be overridden by dynamic CSS if settings exist */
}

/* Hide theme's sale badge if our badge exists (using :has() selector) */
/* Apply to all product loops */
.woocommerce ul.products li.product:has(.drba-sale-badge) .onsale:not(.drba-sale-badge),
.woocommerce .product:has(.drba-sale-badge) .onsale:not(.drba-sale-badge),
li.product:has(.drba-sale-badge) .onsale:not(.drba-sale-badge),
.wc-block-grid__product:has(.drba-sale-badge) .onsale:not(.drba-sale-badge) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Mobile styles for discount badge - default values, can be overridden by dynamic CSS */
@media (max-width: 768px) {
    .drba-sale-badge {
        padding: 4px 8px;
        line-height: 1.2;
        /* Default font-size - will be overridden by dynamic CSS if settings exist */
    }
}