/**
 * WC Product Labels - Frontend Styles
 */

/* Labels Wrapper */
.wcpl-labels-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.wcpl-single-labels-container {
    position: relative;
}

.wcpl-single-labels-container .wcpl-labels-wrapper {
    position: absolute;
}

/* Image Wrapper for filtered images */
.wcpl-image-wrapper {
    position: relative;
    display: inline-block;
}

/* Base Label Styles */
.wcpl-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    pointer-events: auto;
    box-sizing: border-box;
    line-height: 1.2;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.wcpl-label img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wcpl-label i {
    font-size: var(--wcpl-icon-size, 16px);
}

.wcpl-label lottie-player {
    display: block;
}

/* Custom Label (Elementor widget) */
.wcpl-custom-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    line-height: 1.2;
    transition: all 0.3s ease;
}

/* Hover Animations */
.wcpl-hover-scale:hover {
    transform: scale(1.1);
}

.wcpl-hover-rotate:hover {
    transform: rotate(5deg);
}

.wcpl-hover-brightness:hover {
    filter: brightness(1.2);
}

/* Animations */
.wcpl-animated {
    animation-duration: var(--wcpl-anim-duration, 1s);
    animation-delay: var(--wcpl-anim-delay, 0s);
    animation-iteration-count: var(--wcpl-anim-iteration, infinite);
    animation-fill-mode: both;
}

/* Pulse Animation */
@keyframes wcpl-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.wcpl-anim-pulse {
    animation-name: wcpl-pulse;
}

/* Bounce Animation */
@keyframes wcpl-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.wcpl-anim-bounce {
    animation-name: wcpl-bounce;
}

/* Shake Animation */
@keyframes wcpl-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.wcpl-anim-shake {
    animation-name: wcpl-shake;
}

/* Flip Animation */
@keyframes wcpl-flip {
    0% {
        transform: perspective(400px) rotateY(0);
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    60% {
        transform: perspective(400px) rotateY(10deg);
    }
    80% {
        transform: perspective(400px) rotateY(-5deg);
    }
    100% {
        transform: perspective(400px) rotateY(0);
    }
}

.wcpl-anim-flip {
    animation-name: wcpl-flip;
    backface-visibility: visible;
}

/* Swing Animation */
@keyframes wcpl-swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.wcpl-anim-swing {
    animation-name: wcpl-swing;
    transform-origin: top center;
}

/* Tada Animation */
@keyframes wcpl-tada {
    0% {
        transform: scale(1) rotate(0);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

.wcpl-anim-tada {
    animation-name: wcpl-tada;
}

/* Wobble Animation */
@keyframes wcpl-wobble {
    0% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-10px) rotate(-5deg);
    }
    30% {
        transform: translateX(8px) rotate(3deg);
    }
    45% {
        transform: translateX(-6px) rotate(-3deg);
    }
    60% {
        transform: translateX(4px) rotate(2deg);
    }
    75% {
        transform: translateX(-2px) rotate(-1deg);
    }
    100% {
        transform: translateX(0);
    }
}

.wcpl-anim-wobble {
    animation-name: wcpl-wobble;
}

/* Heartbeat Animation */
@keyframes wcpl-heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
}

.wcpl-anim-heartbeat {
    animation-name: wcpl-heartbeat;
}

/* Flash Animation */
@keyframes wcpl-flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.5;
    }
}

.wcpl-anim-flash {
    animation-name: wcpl-flash;
}

/* Responsive Visibility */
@media (max-width: 767px) {
    .wcpl-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .wcpl-hide-tablet {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .wcpl-hide-desktop {
        display: none !important;
    }
}

/* WooCommerce Integration */
.woocommerce ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product .wcpl-labels-wrapper {
    z-index: 9;
}

.woocommerce div.product div.images {
    position: relative;
}

.woocommerce div.product div.images .wcpl-labels-wrapper {
    z-index: 9;
}

/* WoodMart Theme Compatibility */
.wd-product .product-element-top,
.wd-product .product-image-link,
.wd-product .product-wrapper,
.wd-product-wrapper,
.woodmart-product-wrapper,
.product-grid-item .product-element-top {
    position: relative;
}

.wcpl-woodmart-labels-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.wcpl-woodmart-labels-wrapper .wcpl-labels-wrapper {
    position: static;
}

/* WoodMart product list view */
.wd-products-list .product-element-top,
.wd-products-list .product-wrapper {
    position: relative;
}

/* WoodMart swatches wrapper */
.wd-product .wd-swatches-wrapper ~ .wcpl-woodmart-labels-wrapper {
    z-index: 8;
}

/* WoodMart product buttons */
.wd-product .wd-buttons ~ .wcpl-woodmart-labels-wrapper {
    z-index: 8;
}

/* Thumbnail wrapper for themes */
.wcpl-thumbnail-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

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

/* WoodMart quick view */
.wd-quick-view .wcpl-labels-wrapper,
.woodmart-quick-view .wcpl-labels-wrapper {
    z-index: 9;
}

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

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

/* OceanWP Theme Compatibility */
.owp-product-image,
.woo-entry-image {
    position: relative;
}

/* Storefront Theme Compatibility */
.storefront-product-pagination a img {
    position: relative;
}

/* Elementor WooCommerce Widgets */
.elementor-widget-woocommerce-products .product {
    position: relative;
}

/* Cart Thumbnails */
.woocommerce-cart-form__cart-item .product-thumbnail {
    position: relative;
}

.woocommerce-cart-form__cart-item .wcpl-labels-wrapper {
    position: relative;
    display: inline-block;
}

.woocommerce-cart-form__cart-item .wcpl-label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 5px 0;
    font-size: 10px;
    padding: 2px 5px;
}

/* Mini Cart */
.widget_shopping_cart .wcpl-labels-wrapper {
    display: none;
}

/* Elementor Preview */
.elementor-editor-active .wcpl-label,
.elementor-editor-active .wcpl-custom-label {
    pointer-events: none;
}

/* Print Styles */
@media print {
    .wcpl-label,
    .wcpl-custom-label,
    .wcpl-labels-wrapper {
        display: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .wcpl-label,
    .wcpl-custom-label {
        border: 2px solid currentColor !important;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .wcpl-animated {
        animation: none !important;
    }
    
    .wcpl-hover-scale:hover,
    .wcpl-hover-rotate:hover {
        transform: none !important;
    }
}

/* RTL Support */
[dir="rtl"] .wcpl-label {
    flex-direction: row-reverse;
}

[dir="rtl"] .wcpl-label i {
    margin-left: 5px;
    margin-right: 0;
}

/* Elementor Container */
.wcpl-elementor-container {
    display: inline-block;
}

.wcpl-elementor-image-wrapper {
    position: relative;
    display: inline-block;
}

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

/* Placeholder */
.wcpl-placeholder-image {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}

/* Quick View Compatibility */
.quick-view-content .wcpl-labels-wrapper,
.mfp-content .wcpl-labels-wrapper {
    z-index: 9;
}

/* Swiper/Slider Compatibility */
.swiper-slide .wcpl-labels-wrapper,
.slick-slide .wcpl-labels-wrapper {
    z-index: 9;
}

/* Lazy Load Compatibility */
.lazyload ~ .wcpl-labels-wrapper,
.lazyloading ~ .wcpl-labels-wrapper {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazyloaded ~ .wcpl-labels-wrapper {
    opacity: 1;
}