/*
 * WT - Color de botones de filtros v1.0
 *
 * FUNCION:
 * - Ajusta el color de los encabezados/botones de filtros de WCPT.
 * - Usa el color primario global de Elementor como fondo.
 * - Mantiene el texto blanco para mejorar contraste visual.
 */

.wcpt-filter-heading {
	color: white;
	background-color: var(--e-global-color-primary) !important;
}

/* WT - Badges visuales para productos agotados y en oferta v1.0

   FUNCION:
   - Muestra una etiqueta "Agotado" sobre productos sin stock en tablas WCPT.
   - Oscurece la imagen del producto agotado.
   - Muestra una etiqueta "Oferta" sobre productos en promocion.
   - Ajusta las etiquetas en movil para evitar cortes de texto.
*/

/* ================================================
   BADGE "AGOTADO" — productos sin stock
   Muestra un overlay oscuro centrado sobre la imagen
   con el texto "AGOTADO" cuando el producto no tiene stock.
   El plugin agrega automáticamente la clase wcpt-out-of-stock
   a la fila cuando el producto está agotado en WooCommerce.
   ================================================ */

/* Necesario para que el badge ::after se posicione
   relativo a este contenedor y no a la página */
.wcpt-row.wcpt-out-of-stock .wcpt-product-image-wrapper {
    position: relative !important;
    display: inline-block !important;
}

/* El badge en sí: centrado sobre la imagen con fondo semitransparente */
.wcpt-row.wcpt-out-of-stock .wcpt-product-image-wrapper::after {
    content: 'Agotado' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    pointer-events: none !important; /* El badge no interfiere con clics */
}

/* Oscurece la imagen del producto agotado para
   reforzar visualmente que no está disponible */
.wcpt-row.wcpt-out-of-stock .wcpt-product-image-wrapper img {
    opacity: 0.6 !important;
}


/* ================================================
   BADGE "OFERTA" — productos en promoción
   Muestra una etiqueta roja en la parte inferior
   de la imagen cuando el producto tiene precio rebajado.
   La clase wcpt-fila-en-oferta la agrega el snippet
   de JavaScript que detecta wcpt-product-on-sale.
   ================================================ */

/* Necesario para que el badge ::before se posicione
   relativo a este contenedor y no a la página */
.wcpt-fila-en-oferta .wcpt-product-image-wrapper {
    position: relative !important;
    display: inline-block !important;
}

/* El badge en sí: pegado al borde inferior de la imagen
   con esquinas redondeadas solo arriba (efecto etiqueta) */
.wcpt-fila-en-oferta .wcpt-product-image-wrapper::before {
    content: 'Oferta' !important;
    position: absolute !important;
    bottom: 0px !important;      /* Pegado al borde inferior */
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #e00000 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 6px 16px !important;
    border-radius: 6px 6px 0px 0px !important; /* Solo esquinas superiores redondeadas */
    pointer-events: none !important; /* El badge no interfiere con clics */
}

/* ================================================
   RESPONSIVE — ajuste del badge "Oferta" en móvil
   En pantallas pequeñas se reduce el texto y se amplía
   el ancho del badge para evitar que el texto se corte
   o salte de línea.
   ================================================ */
@media (max-width: 768px) {
    .wcpt-fila-en-oferta .wcpt-product-image-wrapper::before {
        font-size: 11px !important;
        padding: 4px 10px !important;
        letter-spacing: 0.5px !important;
        width: 80% !important;        /* Ocupa casi todo el ancho de la imagen */
        text-align: center !important;
        white-space: nowrap !important; /* Evita que el texto salte de línea */
    }
}