/**
 * Top Produit Badge - Styles Frontend (Design Ruban Élégant)
 * 
 * @package TopProduitBadge
 * @version 1.0.0
 */

/* Variables CSS personnalisables */
.tpb-ribbon-badge {
    --tpb-bg-color: #D4AF37;
    --tpb-bg-color-dark: #B8860B;
    --tpb-text-color: #ffffff;
    --tpb-fold-color: #8B6914;
    --tpb-font-size: 12px;
}

/* Container du badge ruban */
.tpb-ribbon-badge {
    position: absolute;
    top: 15px;
    left: -5px;
    z-index: 10;
    pointer-events: none;
}

/* Ruban principal - Effet Or Brillant */
.tpb-ribbon-inner {
    background: linear-gradient(
        145deg,
        #F5E6A3 0%,
        #D4AF37 15%,
        #FFD700 30%,
        #D4AF37 45%,
        #B8860B 60%,
        #D4AF37 75%,
        #F5E6A3 90%,
        #D4AF37 100%
    );
    color: var(--tpb-text-color);
    padding: 10px 20px 10px 15px;
    font-size: var(--tpb-font-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
    clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%);
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(139, 105, 20, 0.8), 0 0 10px rgba(255, 215, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Texte du badge */
.tpb-text {
    position: relative;
    z-index: 2;
}

/* Effet de brillance animé */
.tpb-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 25%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 100%
    );
    transform: skewX(-25deg);
    z-index: 1;
    -webkit-animation: tpb-shine-anim 3s ease-in-out infinite;
    animation: tpb-shine-anim 3s ease-in-out infinite;
}

@-webkit-keyframes tpb-shine-anim {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 200%;
    }
}

@keyframes tpb-shine-anim {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 200%;
    }
}

/* Pli du ruban (effet 3D) */
.tpb-ribbon-badge::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 0 8px;
    border-color: var(--tpb-fold-color) transparent transparent transparent;
}

/* Styles pour la boucle produits (shop, catégories) */
.woocommerce ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product .tpb-ribbon-badge {
    top: 15px;
    left: -5px;
}

/* Galerie produit WooCommerce - Page produit unique */
.woocommerce-product-gallery {
    position: relative;
}

.woocommerce-product-gallery > .tpb-ribbon-badge,
.woocommerce-product-gallery .tpb-ribbon-badge#tpb-single-badge {
    position: absolute;
    top: 15px;
    left: -5px;
    z-index: 100;
}

/* FlexSlider (galerie WooCommerce avec plusieurs images) */
.flex-viewport {
    position: relative;
}

.flex-viewport > .tpb-ribbon-badge {
    position: absolute;
    top: 15px;
    left: -5px;
    z-index: 100;
}

/* Container images génériques */
.single-product .images,
.single-product .product-images,
.single-product .product-gallery {
    position: relative;
}

/* Ajustements responsive */
@media screen and (max-width: 768px) {
    .tpb-ribbon-badge {
        top: 10px;
    }
    
    .tpb-ribbon-inner {
        padding: 8px 16px 8px 12px;
        font-size: 10px;
    }
    
    .tpb-ribbon-badge::before {
        border-width: 6px 0 0 6px;
        bottom: -6px;
    }
}

@media screen and (max-width: 480px) {
    .tpb-ribbon-inner {
        padding: 6px 14px 6px 10px;
        font-size: 9px;
    }
    
    .tpb-ribbon-badge::before {
        border-width: 5px 0 0 5px;
        bottom: -5px;
    }
}

/* Désactiver les animations si préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
    .tpb-ribbon-badge,
    .tpb-ribbon-inner,
    .tpb-shine {
        -webkit-animation: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* Compatibilité avec différents thèmes */

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

/* Astra */
.ast-woocommerce-container ul.products li.product {
    position: relative;
}

/* OceanWP */
.owp-content-area ul.products li.product {
    position: relative;
}

/* Flatsome */
.products .product-small {
    position: relative;
}

/* Divi */
.et_shop_image {
    position: relative;
}

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

/* WooCommerce Blocks */
.wc-block-grid__product {
    position: relative;
}

.wc-block-grid__product .tpb-ribbon-badge {
    top: 15px;
    left: -5px;
}

/* Hover effect avec lueur dorée */
.woocommerce ul.products li.product:hover .tpb-ribbon-badge,
.woocommerce-product-gallery:hover > .tpb-ribbon-badge {
    transform: translateX(3px);
    transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover .tpb-ribbon-inner,
.woocommerce-product-gallery:hover > .tpb-ribbon-badge .tpb-ribbon-inner {
    box-shadow: 
        3px 3px 12px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(255, 215, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    transition: box-shadow 0.3s ease;
}

/* Flavor Theme */
.flavor-product-gallery,
.single-product .product-images,
.single-product .woocommerce-product-gallery__wrapper {
    position: relative;
}

/* Flavor/flavor_flavor - Container principal produit */
.single-product .summary-wrapper,
.single-product .product-main,
.single-product .product-gallery {
    position: relative;
}

/* Spicy Theme (basé sur votre site) */
.spicy-product-gallery,
.single-product .images,
.single-product .product-image-wrapper {
    position: relative;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tpb-ribbon-inner {
        border: 2px solid #000000;
    }
}

/* Print styles */
@media print {
    .tpb-ribbon-badge {
        filter: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}