/* =========================================================
   📧 NOVA STORE - POPUP MARKETING
   POPUP FLOTANTE SOBRE TODA LA PÁGINA
========================================================= */


/* =========================================================
   CAPA COMPLETA DE LA PANTALLA
========================================================= */

#novaMarketingOverlay {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: none;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px;

    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.68);

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);

    /*
       MUY IMPORTANTE:
       tiene que estar por encima
       del administrador.
    */
    z-index: 2147483647 !important;

}


/* =========================================================
   MOSTRAR
========================================================= */

#novaMarketingOverlay.nova-marketing-visible {

    display: flex !important;

}


/* =========================================================
   TARJETA
========================================================= */

.nova-marketing-popup {

    position: relative !important;

    width: min(620px, calc(100vw - 40px)) !important;

    max-width: 620px !important;

    max-height: calc(100vh - 40px) !important;

    margin: auto !important;

    box-sizing: border-box;

    overflow-y: auto;

    overflow-x: hidden;

    background: #ffffff;

    color: #111111;

    border-radius: 12px;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.50);

    transform: translateZ(0);

    animation:
        novaMarketingEntrada
        0.28s
        ease-out;

}


/* =========================================================
   ANIMACIÓN
========================================================= */

@keyframes novaMarketingEntrada {

    from {

        opacity: 0;

        transform:
            scale(0.92)
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

    }

}


/* =========================================================
   ❌ BOTÓN CERRAR
========================================================= */

.nova-marketing-cerrar {

    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    width: 42px !important;
    height: 42px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border: none !important;

    border-radius: 50% !important;

    background: #ffffff !important;

    color: #111111 !important;

    font-size: 30px !important;

    font-family: Arial, sans-serif !important;

    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 20 !important;

    box-shadow:
        0 3px 15px rgba(0, 0, 0, 0.20);

    transition:
        transform .15s ease,
        background .15s ease;

}


.nova-marketing-cerrar:hover {

    background: #f1f1f1 !important;

    transform: scale(1.08);

}


/* =========================================================
   🖼️ IMAGEN
========================================================= */

.nova-marketing-imagen {

    display: block;

    width: 100%;

    max-width: 100%;

    max-height: 330px;

    object-fit: cover;

}


/* =========================================================
   CONTENIDO
========================================================= */

.nova-marketing-contenido {

    width: 100%;

    box-sizing: border-box;

    padding:
        38px
        42px
        32px;

    text-align: center;

}


/* =========================================================
   TÍTULO
========================================================= */

.nova-marketing-titulo {

    margin:
        0
        0
        12px;

    font-size:
        clamp(
            38px,
            7vw,
            62px
        );

    line-height: 1;

    font-weight: 700;

}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.nova-marketing-descripcion {

    margin:
        0
        auto
        18px;

    max-width: 500px;

    font-size: 18px;

    line-height: 1.45;

}


/* =========================================================
   TEXTO EMAIL
========================================================= */

.nova-marketing-texto-email {

    margin:
        0
        auto
        18px;

    max-width: 500px;

    font-size: 16px;

    line-height: 1.45;

}


/* =========================================================
   📧 INPUT EMAIL
========================================================= */

.nova-marketing-email {

    display: block;

    width: 100% !important;

    height: 58px !important;

    box-sizing: border-box;

    padding:
        0
        18px;

    border:
        1px solid #d5d5d5 !important;

    border-radius: 6px !important;

    background: #f7f7f7 !important;

    color: #111111 !important;

    font-size: 17px !important;

    outline: none !important;

}


.nova-marketing-email:focus {

    border-color:
        #777777 !important;

    background:
        #ffffff !important;

}


/* =========================================================
   ☑ CHECKBOX
========================================================= */

.nova-marketing-check {

    display: flex !important;

    align-items: flex-start !important;

    gap: 10px;

    width: 100%;

    box-sizing: border-box;

    margin-top: 17px;

    text-align: left;

    font-size: 14px;

    line-height: 1.4;

    cursor: pointer;

}


.nova-marketing-check input {

    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;

    flex: 0 0 20px;

    margin:
        1px
        0
        0;

    cursor: pointer;

}


/* =========================================================
   🔘 BOTÓN
========================================================= */

.nova-marketing-boton {

    display: block;

    width: 100% !important;

    min-height: 58px !important;

    margin-top: 22px !important;

    padding:
        14px
        20px !important;

    border: none !important;

    border-radius: 6px !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    letter-spacing: .4px;

    cursor: pointer;

    transition:
        opacity .2s ease,
        transform .15s ease;

}


.nova-marketing-boton:hover {

    opacity: .88;

}


.nova-marketing-boton:active {

    transform: scale(.98);

}


.nova-marketing-boton:disabled {

    opacity: .55;

    cursor: not-allowed;

}


/* =========================================================
   MENSAJE
========================================================= */

.nova-marketing-mensaje {

    min-height: 20px;

    margin-top: 12px;

    font-size: 14px;

}


.nova-marketing-error {

    color: #dc2626;

}


.nova-marketing-ok {

    color: #15803d;

}


/* =========================================================
   📱 MÓVIL
========================================================= */

@media (max-width: 600px) {

    #novaMarketingOverlay {

        padding:
            12px !important;

    }


    .nova-marketing-popup {

        width:
            calc(100vw - 24px) !important;

        max-height:
            calc(100vh - 24px) !important;

        border-radius: 10px;

    }


    .nova-marketing-imagen {

        max-height: 230px;

    }


    .nova-marketing-contenido {

        padding:
            30px
            20px
            24px;

    }


    .nova-marketing-titulo {

        font-size: 38px;

    }


    .nova-marketing-descripcion {

        font-size: 16px;

    }


    .nova-marketing-texto-email {

        font-size: 15px;

    }


    .nova-marketing-email {

        height: 54px !important;

        font-size: 16px !important;

    }


    .nova-marketing-boton {

        min-height: 54px !important;

        font-size: 15px !important;

    }


    .nova-marketing-cerrar {

        top: 8px !important;

        right: 8px !important;

        width: 38px !important;

        height: 38px !important;

    }

}