/**
 * Styles pour l'icône vidéo sur les grilles de produits
 * À placer dans : assets/css/video-icon.css
 */

/* === BADGE VIDÉO === */
.kaa-video-badge {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    z-index: 100 !important;
    
    /* Style visuel */
    background: rgba(255, 255, 255, 0.98);
    color: #ef4444; /* Rouge vif */
    border-radius: 50%;
    
    width: 32px;
    height: 32px;
    
    /* Centrage de l'icône */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* Ombre pour contraste */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 
                0 0 0 2px rgba(239, 68, 68, 0.1);
    
    pointer-events: none; /* Le clic passe au travers */
    line-height: 1 !important;
    
    /* Animation au survol du produit */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kaa-video-badge .dashicons {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 1 !important;
}

/* Animation au survol du produit parent */
.product:hover .kaa-video-badge,
.product-grid-item:hover .kaa-video-badge {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4),
                0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* === ASSURER LE POSITIONNEMENT RELATIF DU PARENT === */
/* Woodmart et structures génériques WooCommerce */
.product .product-element-top,
.product .product-image-link,
.product a.woocommerce-LoopProduct-link,
.product .product-wrapper,
.product-grid-item .product-element-top,
.product-grid-item .product-image-link,
.woodmart-hover-base .product-element-top,
.type-product .product-element-top {
    position: relative !important;
}

/* Fallback pour les cas où le badge est injecté avec classe .kaa-absolute */
.kaa-video-badge.kaa-absolute {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .kaa-video-badge {
        width: 28px;
        height: 28px;
        bottom: 6px !important;
        left: 6px !important;
    }
    
    .kaa-video-badge .dashicons {
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
    }
}

/* === COMPATIBILITÉ THÈMES === */
/* Pour les thèmes qui utilisent des wrappers spécifiques */
.product-small .box-image,
.woocommerce-loop-product__link {
    position: relative !important;
}

/* === VERSION ALTERNATIVE (Badge carré) === */
/* Décommentez cette section si vous préférez un badge carré */
/*
.kaa-video-badge {
    border-radius: 6px !important;
    width: 36px !important;
    height: 28px !important;
    padding: 4px 8px !important;
}

.kaa-video-badge .dashicons {
    margin: 0 !important;
}
*/