/* public/css/badge-style.css */

.csc-new-badge {
    position: absolute;
    /* 
       CAMBIO: De 15px a -14px para lograr que el badge cuelgue exactamente 
       a la mitad por fuera y la mitad por dentro del borde superior de la tarjeta.
    */
    top: -14px; 
    left: 50%;
    transform: translateX(-50%); /* Posición horizontal fija y centrada */
    z-index: 10;
    
    /* Diseño visual */
    background-color: var(--csc-badge-bg-color, #E74C3C);
    color: var(--csc-badge-text-color, #FFFFFF);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* Animación de PULSO (sin escala para evitar CLS en la tarjeta) */
    animation: csc-badge-pulse 2s infinite; 
    white-space: nowrap;
}

/* 
   NUEVO BADGE DE SIN STOCK (ESTILO NEUTRO APAGADO):
   Utiliza colores sobrios y anula la animación de pulso para no capturar 
   atención sobre productos no disponibles, mejorando la UX de compra.
*/
.csc-new-badge.csc-out-of-stock-badge {
    background-color: #718096 !important; /* Gris pizarra neutro */
    color: #ffffff !important;
    animation: none !important; /* Desactivar pulso visual */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 
La animación de resplandor pulso (Glow Shadow Animation)
Utiliza interpolación dinámica sobre variables CSS de marca. 
La sombra irradia fuera de la tarjeta con total fluidez gracias a la liberación del overflow.
*/
@keyframes csc-badge-pulse {
    0% {
        /* Estado inicial de la sombra: color dinámico de marca con 40% de opacidad sin expandirse */
        box-shadow: 0 0 0 0 var(--csc-badge-pulse-color, rgba(231, 76, 60, 0.4)); 
    }
    
    70% {
        /* La sombra se expande a 10px y reduce su opacidad a 0% usando el mismo tono dinámico */
        box-shadow: 0 0 0 10px var(--csc-badge-pulse-color-fade, rgba(231, 76, 60, 0)); 
    }
    
    100% {
        /* La sombra vuelve a 0 de forma invisible para reiniciar el bucle */
        box-shadow: 0 0 0 0 var(--csc-badge-pulse-color-fade, rgba(231, 76, 60, 0));
    }
}