/* ==========================================================================
   NUEVAS REGLAS: CURSOR Y CONTROL DE SCROLL BACKGROUND
   ========================================================================== */

/* 1. Mostrar "manito" en cualquier elemento que abra un popup */
[class*="zb-abrir-popup-"] {
    cursor: pointer !important;
}

/* ==========================================================================
   COMPENSACIÓN EXCLUSIVA EN #jet-theme-core-page MEDIANTE CSS
   ========================================================================== */

/* 1. Bloqueo limpio del scroll en el cuerpo sin modificar su padding */
body.zb-popup-open {
    overflow: hidden !important;
}

/* 2. Aplicar la compensación leyendo la variable global creada por el JS */
body.zb-popup-open #jet-theme-core-page {
    padding-right: var(--zb-scrollbar-width, 0px) !important;
    box-sizing: border-box !important;
}


/* Cuando el popup está abierto */
body.zb-popup-open .menu-principal-desktop-tb {
    box-sizing: border-box !important;
}

/* En pantallas menores a 1366px (usa padding) */
@media (max-width: 1366px) {
    body.zb-popup-open .menu-principal-desktop-tb {
        padding-right: 57px !important; /* 40px base + 17px scroll */
    }
}

/* En pantallas mayores a 1366px (usa right) */
@media (min-width: 1367px) {
    body.zb-popup-open .menu-principal-desktop-tb {
        right: 17px !important;
    }
}


/* ==========================================================================
   1. EL OVERLAY (Fondo y Control de Scroll - ESTADO BASE GENERAL)
   ========================================================================== */

.zb-popup-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(4px);
    overscroll-behavior: contain; 
    
    /* Estado inicial oculto */
    opacity: 0 !important;
    pointer-events: none !important; 
    visibility: hidden;
    display: flex;
    
    /* Transición suave */
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

/* Estado activo general */
.zb-popup-overlay.is-active {
    opacity: 1 !important;
    pointer-events: auto !important; 
    visibility: visible !important;
}

/* CONTENEDOR (Estilos Base Generales) */
.zb-popup-container {
    background: #fff;
    width: 90%;
    max-width: var(--zb-popup-width, 500px);
    max-height: 100dvh; /* Cambiado a 90vh para que no choque con los bordes de la pantalla */
    overflow-y: auto; 
    will-change: transform, opacity;
}

/* ==========================================================================
   ESTILO PROFESIONAL PARA EL BOTÓN DE CIERRE (STICKY CLOSE ICON)
   ========================================================================== */

/* 1. Definición base y comportamiento Sticky */
.zb-popup-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: sticky !important; /* Se mantiene fijo al hacer scroll dentro del popup */
    top: 20px !important;        /* Distancia desde el borde superior al hacer scroll */
    margin-left: auto !important; /* Lo empuja automáticamente hacia la esquina derecha */
    margin-right: 20px !important;
    margin-bottom: -40px !important; /* Compensa el espacio vertical para que flote sobre el contenido */
    width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    background-color: #F3F4F6 !important; /* Fondo circular sutil */
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 100 !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    
    /* Inyección del icono vectorial (SVG de una "X" limpia) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234B5563' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
}

/* 2. Efecto interactivo al pasar el mouse (Hover) */
.zb-popup-close:hover {
    background-color: #E5E7EB !important;
    transform: scale(1.05);
}

.zb-popup-close:active {
    transform: scale(0.95);
}

/* Ocultar botón de cerrar globalmente */
.zb-popup-close {
    display: none !important;
}




/* ==========================================================================
   2. POPUP: INICIAR SESIÓN O REGISTRARSE (ID: 52585)
   ========================================================================== */

/* OVERLAY ACTIVE (Tablet y Desktop) */
@media (min-width: 768px) {
    .zb-popup-overlay.is-active[data-popup-id="52585"] {    
        justify-content: center;
        align-items: center;
    }
    .zb-popup-overlay[data-popup-id="52585"] {
        justify-content: center;
        align-items: center !important;
    }
    .zb-popup-overlay[data-popup-id="52585"] .zb-popup-container {
        width: max-content !important;
        height: max-content;
        border-radius: 32px !important;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        border-top: 1px solid #E0E2E1;
        padding: 0 40px 40px 40px;
    }
}

/* OVERLAY ACTIVE (Mobile) */
@media (max-width: 767px) {
    .zb-popup-overlay.is-active[data-popup-id="52585"] {    
        justify-content: center;
        align-items: flex-end !important;
    }
    .zb-popup-overlay[data-popup-id="52585"] {
        justify-content: center;
        align-items: flex-end !important;
    }
        .zb-popup-overlay[data-popup-id="52585"] .zb-popup-container {
        width: 100%;
        min-width: 100%;
        height: 100%;
        border-radius: 0 32px 0 0 !important;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        padding: 32px 32px 32px 32px;
        max-width: var(--zb-popup-width, 600px);
    }
}


/* ==========================================================================
   3. POPUP: CREAR RESEÑA - PAGE TIENDA (ID: 52599)
   ========================================================================== */

/* OVERLAY ACTIVE (Tablet y Desktop) */
@media (min-width: 768px) {
    .zb-popup-overlay.is-active[data-popup-id="52599"] {    
        justify-content: center;
        align-items: center;
    }
        .zb-popup-overlay[data-popup-id="52599"] {
        justify-content: center;
        align-items: center !important;
    }
    .zb-popup-overlay[data-popup-id="52599"] .zb-popup-container {
        width: 450px !important;
        height: max-content;
        border-radius: 32px !important;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        border-top: 1px solid #E0E2E1;
        padding: 40px 32px 32px 32px;
        overflow: hidden;
    }
}

/* OVERLAY ACTIVE (Mobile) */
@media (max-width: 767px) {
    .zb-popup-overlay.is-active[data-popup-id="52599"] {    
        justify-content: center;
        align-items: flex-end !important;
    }
    .zb-popup-overlay[data-popup-id="52599"] {
        justify-content: center;
        align-items: flex-end !important;
    }
    .zb-popup-overlay[data-popup-id="52599"] .zb-popup-container {
        width: 100%;
        min-width: 100%;
        height: max-content;
        border-radius: 32px 32px 0 0 !important;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        padding: 32px 24px 24px 24px;
        max-width: var(--zb-popup-width, 600px);
    }
}



/* ==========================================================================
   4. POPUP: NOTIFICACIONES (ID: 52567)
   ========================================================================== */

/* OVERLAY ACTIVE (Tablet y Desktop) */
@media (min-width: 768px) {
    .zb-popup-overlay.is-active[data-popup-id="52567"] {    
        justify-content: center;
        align-items: flex-end !important;
    }
    .zb-popup-overlay[data-popup-id="52567"] {
        justify-content: center;
        align-items: flex-end !important;
    }
    .zb-popup-overlay[data-popup-id="52567"] .zb-popup-container {
        width: max-content !important;
        min-width: 480px;
        height: 100%;
        border-radius: 0 !important;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        border-top: 1px solid #E0E2E1;
        padding: 0;
        min-height: 100% !important;
    }
}

/* OVERLAY ACTIVE (Mobile) */
@media (max-width: 767px) {
    .zb-popup-overlay.is-active[data-popup-id="52567"] {    
        justify-content: center;
        align-items: flex-end !important;
    }
    .zb-popup-overlay[data-popup-id="52567"] {
        justify-content: center;
        align-items: flex-end !important;
    }
        .zb-popup-overlay[data-popup-id="52567"] .zb-popup-container {
        width: 100%;
        min-width: 100%;
        height: 100%;
        border-radius: 32px 32px 0 0 !important;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        padding: 32px 32px 32px 32px;
        max-width: var(--zb-popup-width, 600px);
    }
}


/* ==========================================================================
   5. POPUP: RESEÑAS DEL VENDEDOR (ID: 52598)
   ========================================================================== */

/* OVERLAY ACTIVE (Tablet y Desktop) */
@media (min-width: 768px) {
    .zb-popup-overlay.is-active[data-popup-id="52598"] {    
        justify-content: center;
        align-items: center;
    }
    .zb-popup-overlay[data-popup-id="52598"] {
        justify-content: center;
        align-items: center !important;
    }
    .zb-popup-overlay[data-popup-id="52598"] .zb-popup-container {
        width: 480px !important;
        height: 100vh;
        min-height: 100vh;
        border-radius: 0 !important;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        border-top: 1px solid #E0E2E1;
        padding: 0;
    }
}

/* OVERLAY ACTIVE (Mobile) */
@media (max-width: 767px) {
    .zb-popup-overlay.is-active[data-popup-id="52598"] {    
        justify-content: center;
        align-items: flex-end !important;
    }
    .zb-popup-overlay[data-popup-id="52598"] {
        justify-content: center;
        align-items: flex-end !important;
    }
        .zb-popup-overlay[data-popup-id="52598"] .zb-popup-container {
        width: 100%;
        min-width: 100%;
        height: max-content;
        max-height: 98dvh !important;
        border-radius: 32px 32px 0 0 !important;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        padding: 0;
    }
}

/* Mostrar botón de cerrar globalmente */
.zb-popup-overlay[data-popup-id="52598"] .zb-popup-close {
    display: block !important;
}


/* =========================================
   3. POPUP (BLOQUEAR CONTENIDO BLOG)
========================================= */

.zb-popup-overlay[data-popup-id="52608"] {
    justify-content: center;
    align-items: flex-end !important; /* Esto es lo que pega el modal al fondo */
}

.zb-popup-overlay[data-popup-id="52608"] .zb-popup-container {
    width: 100%;
}


/* =========================================
   3. POPUP (INICIAR O REGISTRARSE - OJO PERO SIN PORTADA IMAGEN)
========================================= */

.zb-popup-overlay[data-popup-id="53370"] {
    justify-content: center;
    align-items: flex-end; /* Esto es lo que pega el modal al fondo */
    backdrop-filter: blur(3px);
}

@media (min-width: 450px) {
.zb-popup-overlay[data-popup-id="53370"] {
    align-items: center;
}}

.zb-popup-overlay[data-popup-id="53370"] .zb-popup-container {
    height: max-content;
    width: 100%;
    border-radius: 32px 32px 0 0;
}

@media (min-width: 450px) {
.zb-popup-overlay[data-popup-id="53370"] .zb-popup-container {
    height: max-content;
    width: max-content;
    border-radius: 32px !important;
}}


/* =========================================
   7. POPUP (RECHAZO A PUBLICACIÓN - MIS VEHICULOS)
========================================= */

.zb-popup-overlay[data-popup-id="53612"] {
    justify-content: center;
    align-items: flex-end; /* Esto es lo que pega el modal al fondo */
    backdrop-filter: blur(3px);
}

@media (min-width: 450px) {
.zb-popup-overlay[data-popup-id="53612"] {
    align-items: center;
}}

.zb-popup-overlay[data-popup-id="53612"] .zb-popup-container {
    height: max-content;
    width: 100%;
    border-radius: 32px 32px 0 0;
}

@media (min-width: 450px) {
.zb-popup-overlay[data-popup-id="53612"] .zb-popup-container {
    height: max-content;
    width: max-content;
    border-radius: 32px !important;
}}



/* =========================================
   3. TODAS TUS ANIMACIONES
========================================= */

/* --- A. SLIDE RIGHT --- */
.zb-popup-overlay[data-anim="slide-right"] .zb-popup-container {
    position: absolute; right: 0;
    transform: translateX(100%);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.zb-popup-overlay.is-active[data-anim="slide-right"] .zb-popup-container {
    transform: translateX(0);
}

/* --- B. SLIDE LEFT --- */
.zb-popup-overlay[data-anim="slide-left"] .zb-popup-container {
    position: absolute; left: 0; top: 0; height: 100%;
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.zb-popup-overlay.is-active[data-anim="slide-left"] .zb-popup-container {
    transform: translateX(0);
}

/* --- C. SLIDE TOP (Baja desde arriba) --- */
.zb-popup-overlay[data-anim="slide-top"] .zb-popup-container {
    position: absolute; top: 0; left: 0; width: 100%;
    transform: translateY(-100%);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.zb-popup-overlay.is-active[data-anim="slide-top"] .zb-popup-container {
    transform: translateY(0);
}

/* --- D. SLIDE BOTTOM (Sube desde abajo) --- */
.zb-popup-overlay[data-anim="slide-bottom"] .zb-popup-container {
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.zb-popup-overlay.is-active[data-anim="slide-bottom"] .zb-popup-container {
    transform: translateY(0);
}

/* --- E. FADE --- */
.zb-popup-overlay[data-anim="fade"] .zb-popup-container { 
    opacity: 0; 
    transition: opacity 0.4s ease !important; 
}
.zb-popup-overlay.is-active[data-anim="fade"] .zb-popup-container { 
    opacity: 1; 
}

/* --- F. SCALE --- */
.zb-popup-overlay[data-anim="scale"] .zb-popup-container { 
    transform: scale(0.95); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}
.zb-popup-overlay.is-active[data-anim="scale"] .zb-popup-container { 
    transform: scale(1); 
}

/* --- G. SLIDE (Centro) --- */
.zb-popup-overlay[data-anim="slide"] .zb-popup-container { 
    transform: translateY(30px); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}
.zb-popup-overlay.is-active[data-anim="slide"] .zb-popup-container { 
    transform: translateY(0); 
}