/* Elementor Loop Popup v2.4 */

/* --- Spinner --- */
#elp-loading-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 999999;
}
.elp-spinner {
    width: 44px; height: 44px;
    border: 4px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: elp-spin .7s linear infinite;
}
@keyframes elp-spin { to { transform: rotate(360deg); } }

/* --- Bloquear scroll del body --- */
body.elp-modal-open { overflow: hidden; }

/* --- Wrap del modal (fondo oscuro + centrado) --- */
.elp-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s ease;
    /* Importante: visible en el DOM pero invisible hasta .elp-modal--visible */
    pointer-events: none;
}
.elp-modal-wrap.elp-modal--visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- Overlay oscuro (clic para cerrar) --- */
.elp-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    cursor: pointer;
}

/* --- Contenedor del contenido --- */
.elp-modal-inner {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* El fondo lo define el diseño del popup en Elementor */
}

/* --- Botón cerrar --- */
.elp-modal-close {
    position: absolute;
    top: 8px; right: 10px;
    z-index: 10;
    width: 30px; height: 30px;
    background: rgba(0,0,0,.4);
    color: #fff;
    border: none; border-radius: 50%;
    font-size: 15px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.elp-modal-close:hover { background: rgba(0,0,0,.7); }

/* --- Quitar margen extra de Elementor al container raíz --- */
.elp-modal-content > .elementor { margin: 0 !important; }

/* --- Animaciones --- */
.elp-anim-fadeIn  .elp-modal-inner { animation: elp-fadeIn  .3s ease; }
.elp-anim-slideIn .elp-modal-inner { animation: elp-slideIn .3s ease; }
.elp-anim-zoomIn  .elp-modal-inner { animation: elp-zoomIn  .3s ease; }

@keyframes elp-fadeIn  { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes elp-slideIn { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes elp-zoomIn  { from { opacity:0; transform:scale(.88); } to { opacity:1; transform:scale(1); } }

/* --- Botón trigger --- */
.elp-trigger-btn {
    display: inline-flex; align-items: center; gap: .4em;
    cursor: pointer; border: none; background: transparent; padding: 0;
    font-family: inherit; font-size: inherit;
    transition: opacity .2s, transform .2s;
}
.elp-trigger-btn:hover { opacity: .85; transform: translateY(-1px); }