/* Frontend Styles for Product Badge Manager */

/* Badge Wrapper */
.pbm-badges-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/* Individual Badge */
.pbm-badge {
    position: absolute;
    pointer-events: auto;
    z-index: 11;
}

/* Percentage-based badges scale with image */
.pbm-badge.pbm-badge-percentage {
    max-width: none !important; /* Allow percentage to work */
}

.pbm-badge img {
    width: 100%;
    height: auto;
    display: block;
}

/* Position Classes */
.pbm-badge.pbm-top-left {
    top: 10px;
    left: 10px;
}

.pbm-badge.pbm-top-center {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.pbm-badge.pbm-top-right {
    top: 10px;
    right: 10px;
}

.pbm-badge.pbm-middle-left {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.pbm-badge.pbm-middle-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pbm-badge.pbm-middle-right {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.pbm-badge.pbm-bottom-left {
    bottom: 10px;
    left: 10px;
}

.pbm-badge.pbm-bottom-center {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.pbm-badge.pbm-bottom-right {
    bottom: 10px;
    right: 10px;
}

/* Text Badge Styling */
.pbm-badge-text {
    display: inline-block;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* WooCommerce Specific Integration */
.woocommerce ul.products li.product .pbm-badges-wrapper,
.woocommerce-page ul.products li.product .pbm-badges-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* WooCommerce Blocks on Landing Pages */
.wc-block-grid__product .pbm-badges-wrapper,
.wc-block-grid__product-image .pbm-badges-wrapper,
.wc-block-components-product-image__inner-container .pbm-badges-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.wc-block-grid__product-link,
.wc-block-components-product-image,
.wc-block-components-product-image a {
    position: relative;
}

.wc-block-grid__product-image,
.wc-block-components-product-image__inner-container {
    position: relative;
}

/* Ensure product images have relative positioning */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link,
.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
    position: relative;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    position: relative;
}

/* Product Page Badges */
.woocommerce div.product .pbm-product-badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* Mobile Responsive - For Fixed Pixel Badges */
@media (max-width: 768px) {
    .pbm-badge.pbm-badge-pixels {
        max-width: 100px !important;
    }
    
    .pbm-badge.pbm-top-left,
    .pbm-badge.pbm-middle-left,
    .pbm-badge.pbm-bottom-left {
        left: 5px;
    }
    
    .pbm-badge.pbm-top-right,
    .pbm-badge.pbm-middle-right,
    .pbm-badge.pbm-bottom-right {
        right: 5px;
    }
    
    .pbm-badge.pbm-top-center,
    .pbm-badge.pbm-top-left,
    .pbm-badge.pbm-top-right {
        top: 5px;
    }
    
    .pbm-badge.pbm-bottom-center,
    .pbm-badge.pbm-bottom-left,
    .pbm-badge.pbm-bottom-right {
        bottom: 5px;
    }
    
    .pbm-badge-text {
        padding: 5px 10px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .pbm-badge.pbm-badge-pixels {
        max-width: 70px !important;
    }
    
    .pbm-badge-text {
        padding: 4px 8px;
        font-size: 10px;
    }
}

/* Percentage badges maintain their ratio on mobile - no override needed */
/* They naturally scale with the product image */

/* Blocksy Theme Specific Adjustments */
.ct-product-card .pbm-badges-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.ct-image-container {
    position: relative;
}