/**
 * SMR Product Badges - Frontend Styles
 */

/* ============================================
   Theme Compatibility - Force positioning
   ============================================ */

/* Ensure product containers have relative positioning */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product,
.products .product,
.product-grid .product,
[class*="columns-"] .product {
    position: relative !important;
}

/* Common theme wrapper classes */
.woocommerce ul.products li.product .product-thumb-wrap,
.woocommerce ul.products li.product .product-main-wrap,
.woocommerce ul.products li.product .product-inner,
.woocommerce ul.products li.product .product-wrapper,
.woocommerce ul.products li.product .product-image,
.woocommerce ul.products li.product .product-thumbnail,
.woocommerce ul.products li.product .product-image-wrapper,
.woocommerce ul.products li.product .image-wrapper,
.woocommerce ul.products li.product .thumbnail-wrapper,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product > a:first-child,
.woocommerce ul.products li.product .smr-badge-wrapper,
.woocommerce ul.products li.product .smr-image-badge-wrapper {
    position: relative !important;
}

/* Hide default WooCommerce sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
.onsale {
    display: none !important;
}

/* ============================================
   Badge Base Styles
   ============================================ */

.smr-product-badge {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 100 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
    box-sizing: border-box !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Badge wrapper for image filter method */
.smr-image-badge-wrapper {
    position: relative !important;
    display: block !important;
}

/* ============================================
   Positions
   ============================================ */

.smr-badge-top-left {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
}

.smr-badge-top-right {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
}

/* ============================================
   Shape: Rectangle
   ============================================ */

.smr-badge-rectangle {
    border-radius: 0 !important;
}

/* ============================================
   Shape: Rounded Rectangle
   ============================================ */

.smr-badge-rounded {
    border-radius: 4px !important;
}

/* ============================================
   Shape: Circle
   ============================================ */

.smr-badge-circle {
    border-radius: 50% !important;
    padding: 0 !important;
    text-align: center;
}

/* ============================================
   Shape: Banner (Diagonal)
   ============================================ */

.smr-badge-banner {
    width: 120px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 10px !important;
    padding: 0 !important;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.smr-badge-banner.smr-badge-top-left {
    transform: rotate(-45deg) !important;
    transform-origin: center !important;
    top: 18px !important;
    left: -30px !important;
    right: auto !important;
}

.smr-badge-banner.smr-badge-top-right {
    transform: rotate(45deg) !important;
    transform-origin: center !important;
    top: 18px !important;
    right: -30px !important;
    left: auto !important;
}

/* ============================================
   Shape: Star
   ============================================ */

.smr-badge-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) !important;
    padding: 0 !important;
}

/* ============================================
   Shape: Heart
   ============================================ */

.smr-badge-heart {
    clip-path: polygon(50% 15%, 100% 0, 100% 35%, 50% 100%, 0 35%, 0 0) !important;
    padding: 0 !important;
}

/* ============================================
   Shape: Arrow
   ============================================ */

.smr-badge-arrow {
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%) !important;
    padding-left: 15px !important;
    padding-right: 25px !important;
}

.smr-badge-arrow.smr-badge-top-right {
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%) !important;
    padding-left: 25px !important;
    padding-right: 15px !important;
}

/* ============================================
   Shape: Ribbon
   ============================================ */

.smr-badge-ribbon {
    border-radius: 0 4px 4px 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.smr-badge-ribbon.smr-badge-top-right {
    border-radius: 4px 0 0 4px !important;
}

/* ============================================
   Shape: Corner Fold
   ============================================ */

.smr-badge-corner {
    width: 70px !important;
    height: 70px !important;
    clip-path: polygon(0 0, 100% 0, 0 100%) !important;
    padding: 5px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    line-height: 1.1 !important;
    font-size: 9px !important;
}

.smr-badge-corner.smr-badge-top-right {
    clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

/* ============================================
   Shape: Starburst
   ============================================ */

.smr-badge-starburst {
    clip-path: polygon(50% 0%, 61% 25%, 85% 15%, 75% 40%, 100% 50%, 75% 60%, 85% 85%, 61% 75%, 50% 100%, 39% 75%, 15% 85%, 25% 60%, 0% 50%, 25% 40%, 15% 15%, 39% 25%) !important;
    padding: 0 !important;
}

/* ============================================
   Shape: Explosion
   ============================================ */

.smr-badge-explosion {
    clip-path: polygon(50% 0%, 63% 18%, 82% 8%, 77% 30%, 100% 35%, 83% 50%, 100% 65%, 77% 70%, 82% 92%, 63% 82%, 50% 100%, 37% 82%, 18% 92%, 23% 70%, 0% 65%, 17% 50%, 0% 35%, 23% 30%, 18% 8%, 37% 18%) !important;
    padding: 0 !important;
}

/* ============================================
   Shape: Shield
   ============================================ */

.smr-badge-shield {
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%) !important;
    padding-bottom: 15px !important;
}

/* ============================================
   Shape: Tag
   ============================================ */

.smr-badge-tag {
    border-radius: 4px !important;
}

/* ============================================
   Shape: Hexagon
   ============================================ */

.smr-badge-hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) !important;
    padding: 0 15px !important;
}

/* ============================================
   Shape: Bubble
   ============================================ */

.smr-badge-bubble {
    border-radius: 20px !important;
}

/* ============================================
   Shape: Wave
   ============================================ */

.smr-badge-wave {
    border-radius: 50px !important;
}

/* ============================================
   Hover Effects
   ============================================ */

.woocommerce ul.products li.product:hover .smr-product-badge:not(.smr-badge-banner) {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.woocommerce ul.products li.product:hover .smr-badge-banner.smr-badge-top-left {
    transform: rotate(-45deg) scale(1.05);
    transition: transform 0.2s ease;
}

.woocommerce ul.products li.product:hover .smr-badge-banner.smr-badge-top-right {
    transform: rotate(45deg) scale(1.05);
    transition: transform 0.2s ease;
}

/* ============================================
   Theme-specific fixes
   ============================================ */

/* Flatsome theme */
.product-small .box-image,
.product-small .col-inner {
    position: relative !important;
}

/* Astra theme */
.astra-shop-thumbnail-wrap,
.ast-shop-thumbnail-wrap {
    position: relative !important;
}

/* OceanWP theme */
.woo-entry-inner,
.woo-entry-image {
    position: relative !important;
}

/* Storefront theme */
.storefront-product-thumbnail {
    position: relative !important;
}

/* Divi theme */
.et_shop_image {
    position: relative !important;
}

/* Avada theme */
.fusion-product-wrapper {
    position: relative !important;
}

/* Woodmart theme */
.product-element-top,
.product-image-link {
    position: relative !important;
}

/* Porto theme */
.product-inner,
.product-image {
    position: relative !important;
}

/* Kadence theme */
.product-thumb-wrap,
.kadence-product-image {
    position: relative !important;
}

/* ============================================
   Responsive adjustments
   ============================================ */

@media (max-width: 768px) {
    .smr-product-badge {
        font-size: 10px !important;
    }
    
    .smr-badge-banner {
        width: 100px !important;
        font-size: 8px !important;
    }
    
    .smr-badge-banner.smr-badge-top-left {
        top: 14px !important;
        left: -26px !important;
    }
    
    .smr-badge-banner.smr-badge-top-right {
        top: 14px !important;
        right: -26px !important;
    }
    
    .smr-badge-top-left,
    .smr-badge-top-right {
        top: 5px !important;
    }
    
    .smr-badge-top-left {
        left: 5px !important;
    }
    
    .smr-badge-top-right {
        right: 5px !important;
    }
}

/* ============================================
   Print styles
   ============================================ */

@media print {
    .smr-product-badge {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}