/**
 * SunfatUSA Product Badges - Frontend Styles
 *
 * @package SunfatUSA_Product_Badges
 * @since 1.0.0
 */

/* ==========================================================================
   Badge Container
   ========================================================================== */

.spb-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: absolute;
    z-index: 10;
    max-width: calc(100% - 20px);
}

/* Position Variants */
.spb-badges--top-left {
    top: 10px;
    left: 10px;
}

.spb-badges--top-right {
    top: 10px;
    right: 10px;
    justify-content: flex-end;
}

.spb-badges--bottom-left {
    bottom: 10px;
    left: 10px;
}

.spb-badges--bottom-right {
    bottom: 10px;
    right: 10px;
    justify-content: flex-end;
}

/* ==========================================================================
   Individual Badge
   ========================================================================== */

.spb-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spb-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Badge Icon - With Owl Carousel Conflict Fix
   ========================================================================== */

.spb-badge-icon {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    min-width: 14px;
    min-height: 14px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    display: inline-block !important;
}

/* Override owl-carousel img styles specifically for badge icons */
.owl-carousel .owl-item .spb-badge-icon,
.owl-carousel .owl-item img.spb-badge-icon,
.uc_carousel .spb-badge-icon,
.ue_woocommerce_carousel .spb-badge-icon,
.ue_products_carousel .spb-badge-icon {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    min-width: 14px;
    min-height: 14px;
    display: inline-block !important;
}

/* Badge Text */
.spb-badge-text {
    line-height: 1.2;
}

/* ==========================================================================
   Context-Specific Styles
   ========================================================================== */

/* Single Product Page */
.spb-badges--single {
    position: absolute;
}

/* Archive / Shop Loop */
.spb-badges--archive {
    position: absolute;
}

/* Carousel (Unlimited Elements) */
.spb-badges--carousel {
    position: absolute;
}

/* Shortcode / External */
.spb-badges--shortcode,
.spb-badges--external,
.spb-badges--template {
    position: relative;
    margin-bottom: 10px;
}

/* Single product summary (Elementor templates) */
.spb-badges-summary {
    margin-bottom: 15px;
}

.spb-badges-summary .spb-badges {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

.spb-badges--single-summary {
    position: relative;
    justify-content: flex-start;
}

/* ==========================================================================
   WooCommerce Integration
   ========================================================================== */

/* Ensure proper positioning in WooCommerce product loops */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product .spb-badges,
.woocommerce-page ul.products li.product .spb-badges {
    position: absolute;
}

/* Single product gallery */
.woocommerce div.product div.images {
    position: relative;
}

.woocommerce div.product div.images .spb-badges {
    position: absolute;
}

/* ==========================================================================
   Unlimited Elements Integration (Carousel & Grid)
   ========================================================================== */

/* UE Product Carousel & Grid Item */
.ue_woocommerce_carousel .uc_product_item_wrapper,
.ue_woocommerce_carousel .ue_product_item,
.ue_products_carousel .uc_product_item_wrapper,
.ue_products_carousel .ue_product_item,
.uc_post_grid_style_one_item,
.ue-item {
    position: relative;
}

/* UE Product Image Container */
.ue_woocommerce_carousel .uc_product_image,
.ue_products_carousel .uc_product_image,
.uc_post_grid_style_one_image-wrapper,
.uc_post_image {
    position: relative;
}

/* Position badges within UE items */
.ue_woocommerce_carousel .spb-badges,
.ue_products_carousel .spb-badges,
.uc_post_grid_style_one_item .spb-badges,
.ue-item .spb-badges {
    position: absolute;
}

/* UE Widget context */
.spb-badges--ue-widget {
    position: absolute;
    z-index: 15;
}

/* ==========================================================================
   Owl Carousel Specific Overrides
   ========================================================================== */

/* Ensure badge icons are not affected by owl-carousel's img width: 100% */
.owl-carousel .spb-badges,
.owl-carousel .spb-badge {
    display: flex;
}

.owl-carousel .spb-badge img,
.owl-carousel .owl-item .spb-badge img {
    width: 14px !important;
    height: 14px !important;
    max-width: none !important;
    display: inline-block !important;
}

/* ==========================================================================
   Elementor Integration
   ========================================================================== */

/* Elementor Product Widget */
.elementor-widget-woocommerce-products .product,
.elementor-widget-wc-products .product {
    position: relative;
}

/* Elementor Loop Grid */
.elementor-loop-container .e-loop-item {
    position: relative;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media screen and (max-width: 768px) {
    .spb-badge {
        padding: 5px 10px;
        font-size: 10px;
        gap: 4px;
    }
    
    .spb-badge-icon,
    .owl-carousel .spb-badge-icon,
    .owl-carousel .owl-item .spb-badge-icon {
        width: 12px !important;
        height: 12px !important;
        max-width: 12px !important;
        max-height: 12px !important;
        min-width: 12px;
        min-height: 12px;
    }
    
    .spb-badges {
        gap: 4px;
    }
}

@media screen and (max-width: 480px) {
    .spb-badge {
        padding: 4px 8px;
        font-size: 9px;
    }
    
    .spb-badge-icon,
    .owl-carousel .spb-badge-icon,
    .owl-carousel .owl-item .spb-badge-icon {
        width: 10px !important;
        height: 10px !important;
        max-width: 10px !important;
        max-height: 10px !important;
        min-width: 10px;
        min-height: 10px;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes spb-badge-appear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.spb-badge {
    animation: spb-badge-appear 0.3s ease forwards;
}

/* Stagger animation for multiple badges */
.spb-badge:nth-child(1) { animation-delay: 0ms; }
.spb-badge:nth-child(2) { animation-delay: 50ms; }
.spb-badge:nth-child(3) { animation-delay: 100ms; }

/* ==========================================================================
   Predefined Badge Color Classes (optional utility classes)
   ========================================================================== */

/* Green - New Products */
.spb-badge--green,
.spb-badge--new {
    background-color: #10B981 ;
    color: #ffffff ;
}

/* Red - Sale / Closeout */
.spb-badge--red,
.spb-badge--sale,
.spb-badge--closeout {
    background-color: #EF4444 ;
    color: #ffffff ;
}

/* Orange - Promotional */
.spb-badge--orange,
.spb-badge--promo {
    background-color: #F97316 ;
    color: #ffffff ;
}

/* Yellow - Warning / Clearance */
.spb-badge--yellow,
.spb-badge--clearance {
    background-color: #EAB308 ;
    color: #1a1a1a ;
}

/* Blue - Featured */
.spb-badge--blue,
.spb-badge--featured {
    background-color: #3B82F6 ;
    color: #ffffff ;
}

/* Purple - Exclusive */
.spb-badge--purple,
.spb-badge--exclusive {
    background-color: #8B5CF6 ;
    color: #ffffff ;
}

/* ==========================================================================
   Smart Carousel Mode - Context Filtering
   ========================================================================== */

/* Hidden badges (filtered out by context) */
.spb-badge--hidden {
    display: none !important;
}

/* Context-matched badges */
.spb-badge--context-match {
    display: inline-flex !important;
}

/* Container marked as filtered */
.spb-badges.spb-context-filtered {
    opacity: 1; /* Marker class - can add visual indicator if needed */
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .spb-badges {
        position: static;
        margin-bottom: 10px;
    }
    
    .spb-badge {
        box-shadow: none;
        border: 1px solid currentColor;
    }
}