/**
 * Unstoppable Product Labels - Frontend CSS
 * 
 * CRITICAL: This CSS ensures labels overlay product images correctly
 * across all themes and page builders including Elementor.
 *
 * @package Unstoppable_Product_Labels
 * @version 2.1.1
 */

/* ==========================================================================
   POSITIONING SYSTEM
   
   The key to making labels appear ON TOP of images (not above them) is:
   1. Parent container must have position: relative
   2. Labels container must have position: absolute
   3. Labels must be INSIDE the positioned parent
   ========================================================================== */

/* Our wrapper around product images - this is the key! */
.wcpl-labels-wrapper {
    position: relative !important;
    display: block !important;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
}

/* Ensure images inside wrapper behave correctly */
.wcpl-labels-wrapper > a {
    display: block !important;
    position: relative;
}

.wcpl-labels-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

/* Labels overlay - positioned absolutely within the wrapper */
.wcpl-labels-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none;
    z-index: 10 !important;
    overflow: visible !important;
}

/* Ensure groups inside overlay are positioned relative to overlay */
.wcpl-labels-overlay .wcpl-group {
    position: absolute !important;
}

/* Legacy support for older class */
.wcpl-product-container {
    position: relative !important;
}

/* Single product page overlay */
.wcpl-single-labels-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none;
    z-index: 10 !important;
    overflow: visible !important;
}

/* Ensure WooCommerce gallery has position relative */
.woocommerce-product-gallery,
.woocommerce div.product div.images {
    position: relative !important;
}

/* ==========================================================================
   ABOVE/BELOW IMAGE LABELS
   ========================================================================== */

/* Labels above the image */
.wcpl-labels-above {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
    justify-content: flex-start;
}

.wcpl-labels-above .wcpl-group {
    position: static !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Labels below the image */
.wcpl-labels-below {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    justify-content: flex-start;
}

.wcpl-labels-below .wcpl-group {
    position: static !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Center alignment for center positions in above/below */
.wcpl-labels-above .wcpl-pos-top-center,
.wcpl-labels-above .wcpl-pos-middle-center,
.wcpl-labels-above .wcpl-pos-bottom-center,
.wcpl-labels-below .wcpl-pos-top-center,
.wcpl-labels-below .wcpl-pos-middle-center,
.wcpl-labels-below .wcpl-pos-bottom-center {
    justify-content: center;
    width: 100%;
}

/* Right alignment for right positions in above/below */
.wcpl-labels-above .wcpl-pos-top-right,
.wcpl-labels-above .wcpl-pos-middle-right,
.wcpl-labels-above .wcpl-pos-bottom-right,
.wcpl-labels-below .wcpl-pos-top-right,
.wcpl-labels-below .wcpl-pos-middle-right,
.wcpl-labels-below .wcpl-pos-bottom-right {
    justify-content: flex-end;
    width: 100%;
}

/* ==========================================================================
   LABELS GROUP - Position-specific containers (On Image)
   ========================================================================== */

.wcpl-group {
    position: absolute !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    z-index: 10;
    pointer-events: none;
    max-width: 80%;
}

/* Position classes - matches PHP output wcpl-pos-{position} */
.wcpl-pos-top-left {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
}

.wcpl-pos-top-center {
    top: 10px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%);
}

.wcpl-pos-top-right {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    justify-content: flex-end;
}

.wcpl-pos-middle-left {
    top: 50% !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%);
}

.wcpl-pos-middle-center {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%);
}

.wcpl-pos-middle-right {
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%);
    justify-content: flex-end;
}

.wcpl-pos-bottom-left {
    bottom: 10px !important;
    left: 10px !important;
    top: auto !important;
    right: auto !important;
}

.wcpl-pos-bottom-center {
    bottom: 10px !important;
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%);
}

.wcpl-pos-bottom-right {
    bottom: 10px !important;
    right: 10px !important;
    top: auto !important;
    left: auto !important;
    justify-content: flex-end;
}

/* ==========================================================================
   LABEL STYLES
   ========================================================================== */

.wcpl-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: auto;
    box-sizing: border-box;
}

.wcpl-label-text {
    display: inline;
}

.wcpl-label-icon {
    width: 1em;
    height: 1em;
    font-size: inherit;
}

.wcpl-label-icon.dashicons {
    width: 1em;
    height: 1em;
    font-size: 1em;
    line-height: 1;
}

/* ==========================================================================
   SHAPES
   ========================================================================== */

.wcpl-shape-rectangle {
    border-radius: 0;
}

.wcpl-shape-rounded {
    border-radius: 4px;
}

.wcpl-shape-pill {
    border-radius: 50px;
}

.wcpl-shape-circle {
    border-radius: 50%;
    min-width: 2.5em;
    min-height: 2.5em;
    padding: 8px;
    justify-content: center;
    text-align: center;
}

.wcpl-shape-ribbon {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
}

.wcpl-shape-ribbon::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 8px solid currentColor;
}

.wcpl-shape-banner {
    width: 100%;
    max-width: none;
    text-align: center;
    justify-content: center;
    border-radius: 0;
}

/* ==========================================================================
   ANIMATIONS (Pro only)
   ========================================================================== */

@keyframes wcpl-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes wcpl-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes wcpl-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@keyframes wcpl-shimmer {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes wcpl-glow {
    0%, 100% { box-shadow: 0 0 5px currentColor; }
    50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
}

.wcpl-anim-pulse {
    animation: wcpl-pulse 2s ease-in-out infinite;
}

.wcpl-anim-bounce {
    animation: wcpl-bounce 1s ease-in-out infinite;
}

.wcpl-anim-shake {
    animation: wcpl-shake 0.5s ease-in-out infinite;
}

.wcpl-anim-shimmer {
    animation: wcpl-shimmer 2s ease-in-out infinite;
}

.wcpl-anim-glow {
    animation: wcpl-glow 2s ease-in-out infinite;
}

/* ==========================================================================
   THEME COMPATIBILITY - Force position:relative on common theme elements
   ========================================================================== */

/* Standard WooCommerce */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product,
li.product {
    position: relative !important;
}

/* WooCommerce product link wrapper */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product > a:first-child {
    position: relative !important;
    display: block;
}

/* WooCommerce Blocks */
.wc-block-grid__product,
.wc-block-product {
    position: relative !important;
}

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

/* Astra */
.ast-woo-product-gallery-layout-vertical .woocommerce-product-gallery,
.astra-shop-thumbnail-wrap,
.ast-shop-summary-wrap {
    position: relative !important;
}

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

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

/* Storefront */
.storefront-sorting,
.site-main ul.products li.product {
    position: relative !important;
}

/* Divi */
.et_shop_image,
.et_pb_shop .product,
.et_pb_wc_images {
    position: relative !important;
}

/* Avada */
.fusion-woo-product-grid .product,
.fusion-rollover-content {
    position: relative !important;
}

/* Kadence */
.kadence-woo-products .product,
.products .product-loop-image {
    position: relative !important;
}

/* GeneratePress */
.generate-columns-container .product,
.wc-block-grid .wc-block-grid__product {
    position: relative !important;
}

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

/* Flavor theme */
.fl-product-loop-item,
.fl-product-image {
    position: relative !important;
}

/* Generic fallbacks */
.product-inner,
.product-wrapper,
.product-image-wrapper,
.product-thumb,
.product-thumbnail,
.box-image,
.product-image,
.image-wrap,
.product-loop-image {
    position: relative !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .wcpl-label {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .wcpl-group {
        max-width: 90%;
    }
    
    .wcpl-pos-top-left,
    .wcpl-pos-top-right,
    .wcpl-pos-bottom-left,
    .wcpl-pos-bottom-right,
    .wcpl-pos-middle-left,
    .wcpl-pos-middle-right {
        left: 5px;
        right: 5px;
        top: 5px;
    }
    
    .wcpl-pos-top-right,
    .wcpl-pos-middle-right,
    .wcpl-pos-bottom-right {
        left: auto;
        right: 5px;
    }
    
    .wcpl-pos-bottom-left,
    .wcpl-pos-bottom-right {
        top: auto;
        bottom: 5px;
    }
}

/* ==========================================================================
   UTILITY
   ========================================================================== */

/* Hide default sale badge when option enabled */
.wcpl-hide-default-sale .onsale,
body.wcpl-hide-sale-badge .onsale {
    display: none !important;
}