/**
 * MrB Promo Badge - Frontend Styles
 * Compatible with various WooCommerce themes
 */

/* Base container positioning - works with most WooCommerce themes */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products .product,
.woocommerce-page ul.products .product,
.wc-block-grid__product,
.products .product,
.product {
    position: relative !important;
}

/* Fallback for themes that use different selectors */
.woocommerce-loop-product__link,
.product-image-wrapper,
.product-thumbnail,
.product-image,
.woocommerce-loop-product__thumbnail {
    position: relative;
}

/* Badge base styles */
.mrb-promo-badge {
    position: absolute !important;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    white-space: nowrap;
    max-width: 90%;
    word-wrap: break-word;
    overflow: hidden;
}

/* Text badge specific */
.mrb-promo-badge--type-text {
    min-width: auto;
}

.mrb-promo-badge__text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Image badge specific */
.mrb-promo-badge--type-image {
    display: inline-flex;
}

.mrb-promo-badge__img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Position-specific adjustments */
.mrb-promo-badge--top-left {
    top: 0;
    left: 0;
    transform-origin: top left;
}

.mrb-promo-badge--top-right {
    top: 0;
    right: 0;
    transform-origin: top right;
}

.mrb-promo-badge--bottom-left {
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
}

.mrb-promo-badge--bottom-right {
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
}

/* Responsive adjustments - hide/show based on data attributes */
/* Base display - will be overridden by media queries */
.mrb-promo-badge {
    display: inline-flex;
}

/* Desktop (769px and above) */
@media screen and (min-width: 769px) {
    /* Hide on desktop if show_desktop is 0 */
    .mrb-promo-badge[data-show-desktop="0"] {
        display: none !important;
    }
    
    /* Show on desktop if show_desktop is 1 */
    .mrb-promo-badge[data-show-desktop="1"] {
        display: inline-flex !important;
    }
    
    /* Ignore mobile setting on desktop */
    .mrb-promo-badge[data-show-mobile="0"][data-show-desktop="1"] {
        display: inline-flex !important;
    }
    
    .mrb-promo-badge[data-show-mobile="1"][data-show-desktop="1"] {
        display: inline-flex !important;
    }
}

/* Mobile (768px and below) */
@media screen and (max-width: 768px) {
    .mrb-promo-badge {
        max-width: 85%;
    }

    .mrb-promo-badge__text {
        font-size: 0.9em;
    }

    /* Hide on mobile if show_mobile is 0 */
    .mrb-promo-badge[data-show-mobile="0"] {
        display: none !important;
    }
    
    /* Show on mobile if show_mobile is 1 */
    .mrb-promo-badge[data-show-mobile="1"] {
        display: inline-flex !important;
    }
    
    /* Ignore desktop setting on mobile */
    .mrb-promo-badge[data-show-desktop="0"][data-show-mobile="1"] {
        display: inline-flex !important;
    }
    
    .mrb-promo-badge[data-show-desktop="1"][data-show-mobile="1"] {
        display: inline-flex !important;
    }
}

@media screen and (max-width: 480px) {
    .mrb-promo-badge {
        max-width: 80%;
    }

    .mrb-promo-badge__text {
        font-size: 0.85em;
    }

    /* Hide if show on mobile is disabled */
    .mrb-promo-badge[data-show-mobile="0"] {
        display: none !important;
    }
}

/* Compatibility fixes for popular themes */

/* Storefront theme */
.storefront .products .product .mrb-promo-badge {
    z-index: 99;
}

/* Astra theme */
.ast-separate-container .woocommerce ul.products li.product .mrb-promo-badge {
    z-index: 10;
}

/* OceanWP theme */
.woocommerce ul.products li.product-inner {
    position: relative;
}

/* Flatsome theme */
.product-box .mrb-promo-badge {
    z-index: 5;
}

/* Divi theme */
.et_pb_module .woocommerce ul.products li.product .mrb-promo-badge {
    z-index: 10;
}

/* GeneratePress theme */
.woocommerce ul.products li.product .mrb-promo-badge {
    z-index: 10;
}

/* Neve theme */
.woocommerce ul.products li.product .mrb-promo-badge {
    z-index: 10;
}

/* Kadence theme */
.products .product .mrb-promo-badge {
    z-index: 10;
}

/* Compatibility with WooCommerce blocks */
.wc-block-grid__product .mrb-promo-badge {
    z-index: 10;
}

/* Ensure badge doesn't interfere with product links */
.mrb-promo-badge a {
    pointer-events: none;
}

/* Print styles - hide badges when printing */
@media print {
    .mrb-promo-badge {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mrb-promo-badge {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mrb-promo-badge {
        transition: none !important;
    }
}