/**
 * WC Product Swatches & Badges - Badges CSS
 */

/* Badges wrapper */
.wc-psb-badges-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 10;
    pointer-events: none;
}

/* Position variants - set via inline CSS */

/* Single badge */
.wc-psb-badge {
    display: inline-block;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* font-size, padding, border-radius, colors set via inline CSS */
}

/* Badge type modifiers - colors set via inline CSS from settings */
.wc-psb-badge--sale {
    /* background-color and color set via settings */
}

.wc-psb-badge--new {
    /* background-color and color set via settings */
}

.wc-psb-badge--bestseller {
    /* background-color and color set via settings */
}

.wc-psb-badge--attribute {
    /* background-color and color set via settings */
}

.wc-psb-badge--custom {
    /* background-color and color set inline per badge */
}

/* Ensure product container has positioning */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.wc-block-grid__product,
li.product {
    position: relative;
}

/* Ensure badges appear over images */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a:first-child,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    position: relative;
    display: block;
}

/* Single product badges */
.single-product .wc-psb-badges-wrapper {
    z-index: 100;
}

/* Hide default WooCommerce sale badge when our plugin is active */
.woocommerce span.onsale {
    display: none !important;
}

/* Kadence theme compatibility */
.woocommerce ul.products.columns-1 li.product .wc-psb-badges-wrapper,
.woocommerce ul.products.columns-2 li.product .wc-psb-badges-wrapper,
.woocommerce ul.products.columns-3 li.product .wc-psb-badges-wrapper,
.woocommerce ul.products.columns-4 li.product .wc-psb-badges-wrapper,
.woocommerce ul.products.columns-5 li.product .wc-psb-badges-wrapper,
.woocommerce ul.products.columns-6 li.product .wc-psb-badges-wrapper {
    position: absolute;
}

/* Product image wrapper */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.product-loop-image-wrap,
.product-image-wrap {
    position: relative;
    overflow: visible;
}

/* Shortcode variant (inline usage) */
.wc-psb-badges-shortcode {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
}

/* Hover effect on badges (optional) */
.wc-psb-badge {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wc-psb-badges-wrapper:hover .wc-psb-badge {
    transform: scale(1.02);
}

/* Badge shapes */
.wc-psb-badge--pill {
    border-radius: 20px !important;
}

.wc-psb-badge--ribbon {
    position: relative;
    padding-left: 15px;
}

.wc-psb-badge--ribbon::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 8px;
    border-color: transparent transparent transparent white;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .wc-psb-badge {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    
    .wc-psb-badges-wrapper {
        gap: 3px !important;
    }
}

/* Animation on load */
@keyframes wc-psb-badge-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wc-psb-badge {
    animation: wc-psb-badge-in 0.3s ease-out;
}

.wc-psb-badge:nth-child(2) {
    animation-delay: 0.1s;
}

.wc-psb-badge:nth-child(3) {
    animation-delay: 0.2s;
}

/* Quick view compatibility */
.quick-view-content .wc-psb-badges-wrapper {
    position: relative;
    margin-bottom: 15px;
}

/* Elementor compatibility */
.elementor-wc-products .wc-psb-badges-wrapper,
.elementor-widget-woocommerce-products .wc-psb-badges-wrapper {
    position: absolute;
}

/* WooCommerce blocks compatibility */
.wc-block-grid .wc-psb-badges-wrapper {
    position: absolute;
}