/**
 * Estilos exclusivos de la variante "cybermonday" (application/views/variants/cybermonday/).
 * Se cargan SOLO desde variants/cybermonday/head.php -> no afectan principal/nl/etc.
 * Pedido 2026-10-30: mismo listador_box/ficha/header de siempre, pero con los colores
 * oficiales de CyberMonday.com.ar (el degrade cian->violeta ya se usaba en LCF en campañas
 * previas, ver .nl-box-datos-promo-effectivo-cm / .nl-promos-cyber-limited en lcf-bundle.css,
 * y assets/css/stylesCM2025.css del ciclo pasado).
 */

:root {
    --cm-cian: #2ccbf6;
    --cm-azul: #5580f7;
    --cm-violeta: #7a3af8;
    --cm-gradiente: linear-gradient(35deg, var(--cm-cian) 0%, var(--cm-azul) 50%, var(--cm-violeta) 100%);
}

/* ============== BARRA DE SUCURSALES (header) ============== */

.lcf-suc-card-header {
    background: var(--cm-violeta) !important;
}

.lcf-suc-num {
    color: var(--cm-violeta) !important;
}

/* ============== LISTADOR BOX (nl-box) ============== */

/* Badge %OFF + franja de pago (listador-box.php, bloque "summer-sale") */
.summer-sale-off-badge {
    border-color: var(--cm-violeta) !important;
}

.summer-sale-off-text {
    background: var(--cm-gradiente) !important;
    background-color: var(--cm-violeta) !important;
    color: #ffffff !important;
}

.summer-sale-precio,
.summer-sale-efectivo {
    color: var(--cm-violeta) !important;
}

.summer-sale-container.off-50 .summer-sale-off-badge {
    border-color: var(--cm-violeta) !important;
}

.summer-sale-container.off-50 .summer-sale-off-text {
    background: var(--cm-gradiente) !important;
}

.summer-sale-container.off-50 .summer-sale-precio,
.summer-sale-container.off-50 .summer-sale-efectivo {
    color: var(--cm-violeta) !important;
}

.listador-badge-cuotas {
    background-color: var(--cm-cian) !important;
}

/* Logo CyberMonday arriba a la derecha de la IMAGEN del producto (listador-box.php) --
   position:absolute dentro de .nl-box-imagen (ya tiene position:relative), pegado a la
   esquina superior derecha de la foto. top:10px lo enfrenta, a la misma altura, con la
   marca/codigo que queda en la esquina superior izquierda de la foto (.b20-productData-codigo,
   top:10px, position:absolute contra .nl-box completo -- ver stylesListadores250326.css). */
.cm-logo-listador-img {
    position: absolute;
    top: 10px;
    right: 8px;
    max-width: 46px;
    height: auto;
    z-index: 2;
}

/* Responsive: reduce el tamaño en pantallas chicas, misma esquina (top/right no cambian). */
@media screen and (max-width: 1023px) {
    .cm-logo-listador-img {
        max-width: 38px;
    }
}

/* Badge de "N cuotas sin interés" resaltado (listador-box.php y ficha.php, inline style propio) */
.cuotas-badge-activa {
    background: var(--cm-gradiente) !important;
}

/* ============== FICHA ==============
   ficha.php trae un <style> propio mas abajo en el documento que pisa a lcf-extracted.css
   con rojo (#E4002B); para ganarle hace falta !important aca. */

.ficha-promo-new-badge {
    border-color: var(--cm-violeta) !important;
}

.ficha-promo-new-badge .ficha-off-text {
    background: var(--cm-gradiente) !important;
}

.ficha-promo-new-badge .ficha-efectivo-text {
    color: var(--cm-violeta) !important;
}

.ficha-promo-new-precio {
    color: var(--cm-violeta) !important;
}

/* 50%+ off en ficha: mismo violeta de marca en vez del naranja de siempre */
.ficha-promo-new-badge.off-50 {
    border-color: var(--cm-violeta) !important;
}

.ficha-promo-new-badge.off-50 .ficha-off-text {
    background: var(--cm-gradiente) !important;
}

.ficha-promo-new-badge.off-50 .ficha-efectivo-text {
    color: var(--cm-violeta) !important;
}

.ficha-promo-new-precio.off-50 {
    color: var(--cm-violeta) !important;
}

/* Logo CyberMonday al lado del bloque de descuento + MercadoPago (ficha.php). Posicionado
   absoluto (cuelga hacia la izquierda, mas cerca de la imagen) para NO correr el badge --
   el badge tiene que seguir alineado con el precio tachado de arriba y el precio final de
   abajo, que no llevan el logo. */
.ficha-promo-new-badge {
    position: relative;
}

.cm-logo-ficha-precio {
    position: absolute;
    left: -74px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 85px;
    height: auto;
}

/* Responsive: en mobile la ficha apila imagen/precio a poco ancho y el badge queda pegado
   al borde izquierdo -- colgar el logo hacia la izquierda (como en desktop) lo saca del
   contenedor y queda cortado/superpuesto con lo de al lado. Se pasa al lado DERECHO del
   badge en su lugar (ahi hay aire libre antes del precio final, que esta en la linea de abajo). */
@media screen and (max-width: 767px) {
    .cm-logo-ficha-precio {
        left: auto;
        right: -50px;
        max-width: 62px;
    }
}

@media screen and (max-width: 480px) {
    .cm-logo-ficha-precio {
        right: -42px;
        max-width: 52px;
    }
}

@media screen and (max-width: 360px) {
    .cm-logo-ficha-precio {
        right: -51px;
        max-width: 60px;
    }
}

/* Logo del header que gira y alterna LCF <-> CyberMonday (ver script en header.php) */
.cm-logo-flip-box {
    display: inline-block;
    perspective: 400px;
}

.cm-logo-flip-img {
    transition: transform 0.35s ease;
}

/* ============== CONTADOR REGRESIVO (apagado por defecto, ver header.php) ==============
   Se activa a mano sobre el final del evento, cambiando $cmMostrarContadorFinal a TRUE
   en variants/cybermonday/header.php -- no hace falta tocar este CSS para eso. */

.cm-countdown {
    position: relative;
    text-align: center;
    padding: 14px 10px;
    background-image: url('/assets/img/cm/bg-home-counter.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cm-countdown-title {
    font-family: 'Termina W00 Heavy', 'Ubuntu', sans-serif;
    font-size: 15px;
    color: var(--cm-violeta);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cm-countdown-blocks {
    display: inline-flex;
    gap: 10px;
}

.cm-countdown-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cm-countdown-number {
    min-width: 46px;
    padding: 6px 4px;
    border-radius: 6px;
    background: var(--cm-gradiente);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Ubuntu', sans-serif;
}

.cm-countdown-label {
    margin-top: 3px;
    font-size: 11px;
    color: #555555;
    text-transform: uppercase;
}