/**
 * Frontend CSS voor Custom PNG Badge Manager
 *
 * Simpele, niet-invasieve badge overlay styling.
 * Zorgt ervoor dat parent containers relative zijn en badges
 * absolute gepositioneerd worden. Raakt Swiper of andere sliders NIET aan.
 *
 * @package CustomPngBadgeManager
 * @version 1.6.0
 */

/* ============================================
   Badge Overlay — De daadwerkelijke badge afbeelding
   Alle positionering komt via inline styles (uit plugin settings)
   ============================================ */
.cpbm-badge-overlay,
img.cpbm-badge-overlay {
    position: absolute !important;
    z-index: 10;
    pointer-events: none;
    max-width: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    mix-blend-mode: normal;
    opacity: 1;
    filter: none !important;
    -webkit-filter: none !important;
}

/* ============================================
   Parent containers — moeten relative zijn
   zodat badge absolute positioning werkt
   ============================================ */

/* Swiper slides (EA Single Product Images, WooCommerce galleries) */
.swiper-slide {
    position: relative;
}

/* Specifieke EA containers */
.swiper-slide .product-image-wrap,
.swiper-slide .woocommerce-product-gallery__image {
    position: relative;
}

/* EA Product Grid/List/Carousel overlay containers */
.eael-product-grid .eael-product-wrap .overlay,
.eael-product-grid .product-image-wrap,
.eael-product-grid .image-wrap,
.eael-product-list .product-image-wrap,
.eael-product-list .image-wrap,
.eael-product-list .eael-product-wrap .overlay,
.eael-product-carousel .eael-product-wrap .overlay,
.eael-product-carousel .product-image-wrap,
.eael-product-carousel .image-wrap,
.eael-woo-product-carousel .eael-product-wrap .overlay,
.eael-woo-product-carousel .product-image-wrap,
.eael-product-gallery .product-image-wrap,
.eael-product-gallery .image-wrap {
    position: relative !important;
}

/* Voorkom dat EA overflow:hidden de badge afsnijdt */
.eael-product-grid .eael-product-wrap .overlay,
.eael-product-carousel .eael-product-wrap .overlay,
.eael-woo-product-carousel .eael-product-wrap .overlay {
    overflow: visible !important;
}

/* ============================================
   Badge Container — Archief / Shop pagina's
   (voor standaard WooCommerce fallback)
   ============================================ */
.cpbm-badge-container {
    position: relative !important;
    display: inline-block !important;
    line-height: 0;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================
   Single Product — WooCommerce standaard gallery
   ============================================ */
.cpbm-single-badge-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    background: transparent !important;
}

.woocommerce div.product div.images,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    position: relative;
}

/* ============================================
   Elementor Widget containers
   ============================================ */
.elementor-widget-wc-gallery .cpbm-badge-container,
.elementor-widget-woocommerce-product-images .cpbm-badge-container {
    position: relative !important;
    display: inline-block !important;
}

/* ============================================
   Klikbare Badge Link (v1.5.0)
   ============================================ */
.cpbm-badge-overlay-link {
    position: absolute !important;
    z-index: 10;
    display: inline-block;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    pointer-events: auto;
}

.cpbm-badge-overlay-link:hover,
.cpbm-badge-overlay-link:focus {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.cpbm-badge-overlay-link:hover .cpbm-badge-overlay {
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

/* Override img.cpbm-badge-overlay specificity (0,1,1) met hogere specificity (0,2,1) */
img.cpbm-badge-overlay.cpbm-badge-overlay-linked,
.cpbm-badge-overlay-linked {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    pointer-events: none;
    max-width: 100% !important;
}

/* ============================================
   Debug modus — zichtbare CSS class indicator
   ============================================ */
.cpbm-debug-mode .cpbm-badge-overlay::after {
    content: attr(data-badge-id);
    position: absolute;
    bottom: -18px;
    left: 0;
    font-size: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 11;
}

/* ============================================
   Mobiel responsief
   ============================================ */
@media screen and (max-width: 768px) {
    .cpbm-badge-overlay {
        /* Badge kan optioneel kleiner gemaakt worden op mobiel */
        /* Specifieke maten worden inline ingesteld */
    }
}